Why is this Bootstrap checkbox not working with jQuery?

Question

When the input checkbox is checked, I want to append the <div> with a message. But somehow my code doesn't seem to work. Am I missing anything here?

Here's a link to what I've got so far - http://jsbin.com/petewadeho/edit?html,output

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

  <input id="inp" type="checkbox" data-toggle="toggle" />

  <div id="out"></div>

  <script>
    $('#inp').click(function() {
      if (this.checked) {
        $("#out").append("hey");
      }
    });
  </script>

Milind Anantwar · Accepted Answer · 2016-04-11 08:25:53Z

9

You have used Bootstrap, which is modifying the DOM structure of checkbox element. You need to use .change() event instead of .click():

$('#inp').change(function(){
  if (this.checked) {
      $("#out").append("hey");
  }
});

http://jsbin.com/kenekekose/1/edit?html,output

answered Apr 11, 2016 at 8:25

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ataur Rahman Munna · Accepted Answer · 2016-04-11 08:31:08Z

1

See the following code. here i used onchange function.

  <script>
    $('#inp').change(function(){
      if ($('#inp').prop( "checked" )) {
          $("#out").append("hey");
      }
    }); 
  </script>

answered Apr 11, 2016 at 8:31

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

3 Comments

mplungjan Over a year ago

Why repeat $('#inp') ? Use $(this) or this

Ataur Rahman Munna Over a year ago

Yes, we can use that too.sometimes for beginners, it have been a bit tricky to understand $(this). that's why I directly used $('#inp')

mplungjan Over a year ago

I strongly suggest giving beginners best practices from the start

Tobias Delp · Accepted Answer · 2016-04-11 08:33:37Z

1

The click listener you are setting is getting removed when Bootstrap modifies your checkbox.

The following code will add the listener to the body, so it won't get removed with the DOM element, while Bootstrap does its work

$('body').on('click', '#inp', function(){
  //do append
})

answered Apr 11, 2016 at 8:33

Tobias Delp

537 bronze badges

Collectives™ on Stack Overflow

Why is this Bootstrap checkbox not working with jQuery?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related