I am using bootstrap theme called: Core Admin

This is the code I write:

<div class="span6">
    <input type="checkbox" class="icheck" id="Checkbox1" name="userAccessNeeded">
    <label for="icheck1">Needed</label>
</div>

And bootstrap generates me this code:

<div class="span6">
<div class="icheckbox_flat-aero" style="position: relative;">
    <input type="checkbox" class="icheck" id="Checkbox7" name="userAccessNeeded" style="position: absolute; opacity: 0;">
    <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>
<label for="icheck1" class="">Needed</label>

This is the result:

So basically it makes a pretty checkbox for me. Each time I click on the checkbox, it will add a checked class to the div:

 <div class="icheckbox_flat-aero checked" style="position: relative;">

So at first I wanted to listen the input field being changed like this

$('input[type="checkbox"][name="userAccessNeeded"]').change(function () {
    if (this.checked) {

    }
});

But it doesn't actually change the input field, but rather changes the class of <div> element.

How could I listen to checkbox being checked?

I am using bootstrap theme called: Core Admin http://wrapbootstrap.com/preview/WB0135486

This is the code I write:

<div class="span6">
    <input type="checkbox" class="icheck" id="Checkbox1" name="userAccessNeeded">
    <label for="icheck1">Needed</label>
</div>

And bootstrap generates me this code:

<div class="span6">
<div class="icheckbox_flat-aero" style="position: relative;">
    <input type="checkbox" class="icheck" id="Checkbox7" name="userAccessNeeded" style="position: absolute; opacity: 0;">
    <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>
<label for="icheck1" class="">Needed</label>

This is the result:

So basically it makes a pretty checkbox for me. Each time I click on the checkbox, it will add a checked class to the div:

 <div class="icheckbox_flat-aero checked" style="position: relative;">

So at first I wanted to listen the input field being changed like this

$('input[type="checkbox"][name="userAccessNeeded"]').change(function () {
    if (this.checked) {

    }
});

But it doesn't actually change the input field, but rather changes the class of <div> element.

How could I listen to checkbox being checked?

• javascript
• jquery
• html
• twitter-bootstrap

• Are you sure twitte bootstrap doesnt add the checked property to your checkbox upon checking it ? – dreamweiver Commented Jul 30, 2013 at 14:09
• @dreamweiver yes, I am using the core admin theme, you can see example here and inspect the checkbox element, it only changes class. wrapbootstrap.com/preview/WB0135486 – Jaanus Commented Jul 31, 2013 at 7:17
• but i cant see any checkbox`s in there. – dreamweiver Commented Jul 31, 2013 at 7:45
• @dreamweiver sorry, press Forms from the left panel and there are checkboxes – Jaanus Commented Jul 31, 2013 at 8:11
• I guess my approach should be easy and simple comparatively :) anyway with your logic also it will work – dreamweiver Commented Jul 31, 2013 at 9:27

10 Answers 10

$('input#Checkbox1').change(function () {
    if ($('input#Checkbox1').is(':checked')) {
        $('input#Checkbox1').addClass('checked');
    } else {
        $('input#Checkbox1').removeClass('checked');
    }
});

i solve it that way.

The template looks to be using https://github.com/fronteed/iCheck/, which has callbacks:

$('input[type="checkbox"][name="userAccessNeeded"]').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

Or there is also:

$('input[type="checkbox"][name="userAccessNeeded"]').iCheck('check', function(){
  alert('Well done, Sir');
});

Which should work with a whole range of methods:

// change input's state to 'checked'
$('input').iCheck('check');

// remove 'checked' state
$('input').iCheck('uncheck');

// toggle 'checked' state
$('input').iCheck('toggle');

// change input's state to 'disabled'
$('input').iCheck('disable');

// remove 'disabled' state
$('input').iCheck('enable');

// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');

// remove 'indeterminate' state
$('input').iCheck('determinate');

// apply input changes, which were done outside the plugin
$('input').iCheck('update');

// remove all traces of iCheck
$('input').iCheck('destroy');

Link to the Documentation: http://fronteed.com/iCheck/

You need to bind to the ifchecked event via

Use on() method to bind them to inputs:

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

this will change the checked state

$('input').iCheck('check'); — change input's state to checked

This worked for me

jQuery('input.icheck').on('ifChanged', function (event) {
    if ($(this).prop('checked')) {
        alert('checked');
    } else {
        alert('unchecked');
    }
});

Finally solved it like this, since I am clicking on a div element, then I must listen click event of that, and then check if the div has class and what is the id of checkbox.

 $('.iCheck-helper').click(function () {
    var parent = $(this).parent().get(0);
    var checkboxId = parent .getElementsByTagName('input')[0].id;
    alert(checkboxId);
});

Just my five cents, if anyone would have the same problem..

I needed the exact checkbox states. Toggle not worked here. This one has done the required state delivery for me:

$('.iCheck-helper').click(function () {
    var checkbox = $(this).parent();
    if (checkbox.hasClass('checked')) {
        checkbox.first().addClass('checked');
    } else {
        checkbox.first().removeClass('checked');
    }
        doWhateverAccordingToChoices();
    });

@Srihari got it right except the selector. Indeed the input isn't modified onclick, but the div do :

$('.icheckbox_flat-aero').click(function(){
    $(this).find('input:checkbox').toggleClass('checked'); // or .find('.icheck').
});

Hey i hope this logic should work for you

JS CODE:

$('.icheckbox_flat-aero').on('click',function(){ 
     var checkedId=$(this,'input').attr('id');
     alert(checkedId);
});

This way a general event is added for all the checkbox`s

Happy Coding :)

Looking at your question and working with bootstrap since the past 1 year, I can definitely say that the checked class being added is not done by bootstrap. Neither is the checked class being added is a property which is built into BS 2.3.*.

Yet for your specific question try the following code.

$('.icheck').click(function(){
    $(this).toggleClass('checked');
});

You can get a working example here.

Update 1: The Checkbox cannot be styled by color using CSS. Hence, the developer is using insert tag to delete the Checkbox and put in his styling code. In effect, the CSS and JS in the specified theme do the styling by putting in the new stylized code.

Instead you can listed to the click event on the div icheckbox_flat-aero.

$('.icheckbox_flat-aero').children().on('click',function(){
   alert('checked');
});

Check for the example http://jsfiddle.net/hunkyhari/CVJhe/1/

you could use this:

$('input#Checkbox1').on('ifChanged',function() {
   console.log('checked right now');
});