Giters

vsn4ik / bootstrap-checkbox

A checkbox component based on Bootstrap framework.

Home Page:https://vsn4ik.github.io/bootstrap-checkbox/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't get this to work

lcsqlpete opened this issue · comments

commented

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

commented

You did not fulfill the second mandatory item.

Enable Bootstrap-checkbox via JavaScript:

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

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

commented

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

commented

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:

commented

Thanks again,all works OK now.
Pete

commented

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:

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="dist/js/bootstrap-checkbox.min.js" defer></script>
<script> $(function() { $(':checkbox').checkboxpicker(); }); </script>

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#22 (comment)