search

vsn4ik / bootstrap-checkbox

A checkbox component based on Bootstrap framework.
https://vsn4ik.github.io/bootstrap-checkbox/
MIT License
213 stars 61 forks source link

Can't get this to work #22

Closed lcsqlpete closed 8 years ago

lcsqlpete commented 8 years ago

I'm sure I'm missing something obvious but I cannot get this to work, all checkboxes show up as checkboxes not switches.

I downloaded the latest version and put the dist folder into my project folder. Then copied the basic html from the examples and added one simple checkbox:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

  <script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script>
  <script src="dist/js/bootstrap-checkbox.min.js" defer></script>
</head>
<body>
  <div class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-3">
            <input type="checkbox">
        </div>
    </div>
    </div>
</body>
</html>

Any help much appreciated, I'd really like to use this!

Pete

vsn4ik commented 8 years ago

You did not fulfill the second mandatory item.

Enable Bootstrap-checkbox via JavaScript:

$(':checkbox').checkboxpicker();

possible problem indefer on <script src="...jquery">

lcsqlpete commented 8 years ago

OK thanks. I did try that as a javascript in the tag but it still didn't work. I'm not a javascript expert by any means so would be great if you can give me more info as to where this script should go. Thanks, Pete

vsn4ik commented 8 years ago

Use this:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>  <!-- Without defer -->
  <script src="dist/js/bootstrap-checkbox.min.js" defer></script>
</head>
<body>
  <div class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-3">
            <input type="checkbox">
        </div>
    </div>
    </div>
    <script>
    $(function() {
      $(':checkbox').checkboxpicker();
    });
    </script>
</body>
</html>

For more information read this:

lcsqlpete commented 8 years ago

Thanks again,all works OK now. Pete

lcsqlpete commented 8 years ago

Hi Vasily, Have everything working now, thanks for your help.

I need to execute some javascript when the checkbox is unchecked/checked and cant figure out how to do that. The checkbox has an id of "agent" and I defined an onClick action for it to execute a javascript function but the function never executes. How can I do this?

Thanks, Pete

On Thu, May 12, 2016 at 4:17 PM Vasily A. notifications@github.com wrote:

<!DOCTYPE html>

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/vsn4ik/bootstrap-checkbox/issues/22#issuecomment-218912475