Listen to bootstrap checkbox being checked

Question

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: enter image description here

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?

Are you sure twitte bootstrap doesnt add the checked property to your checkbox upon checking it ? — dreamweiver, Jul 30 '13 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. http://wrapbootstrap.com/preview/WB0135486 — Jaanus, Jul 31 '13 at 07:17
@dreamweiver sorry, press Forms from the left panel and there are checkboxes — Jaanus, Jul 31 '13 at 08:11
I guess my approach should be easy and simple comparatively :) anyway with your logic also it will work — dreamweiver, Jul 31 '13 at 09:27

score 11 · Answer 1 · answered Jul 30 '13 at 14:10

11

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

i solve it that way.

answered Jul 30 '13 at 14:10

CodexVarg

502
1
6
20

score 3 · Answer 2 · answered Sep 16 '13 at 18:36

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');

score 3 · Answer 3 · answered Jul 10 '14 at 20:17

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

score 3 · Answer 4 · edited Jul 02 '16 at 19:10

3

This worked for me

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

edited Jul 02 '16 at 19:10

Sam

4,475
2
28
31

answered Jan 26 '16 at 08:42

Laura Chesches

2,493
1
19
15

score 2 · Accepted Answer · answered Jul 31 '13 at 08:56

2

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);
});

answered Jul 31 '13 at 08:56

Jaanus

16,161
49
147
202

why cant you add a event for the div tag itself,which is reduce the dom searching for parent element. – dreamweiver Jul 31 '13 at 09:05
@dreamweiver `
` is auto generated by boostrap, so I can't add anything there.
– Jaanus Jul 31 '13 at 11:02
so what if its generated dynamically, you will trigger that event only after it has been loaded ,so no worries about that :) you need to be in sync with the bootstrap to accomplish your task,else your it will become unstable – dreamweiver Jul 31 '13 at 11:25

score 2 · Answer 6 · answered Nov 30 '13 at 02:30

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 · Answer 7 · 2013-07-31T10:52:46.970

1

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/

edited Jul 31 '13 at 10:52

answered Jul 30 '13 at 14:30

Srihari

766
1
6
22

This does not help me, look how the class changes here, this is the theme I am using: http://wrapbootstrap.com/preview/WB0135486 . Press on the checkbox and inspect element – Jaanus Jul 31 '13 at 07:19
@Jaanus Did the update help?? Are you still stuck? If you are looking at identifying the check from server side, you may be interested in [this](http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript) – Srihari Aug 01 '13 at 06:47

Yabada · Answer 8 · 2013-07-31T08:03:20.143

1

@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').
});

edited Jul 31 '13 at 08:03

answered Jul 31 '13 at 07:55

Yabada

1,728
1
15
36

score 1 · Answer 9 · answered Jul 31 '13 at 09:25

1

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 :)

answered Jul 31 '13 at 09:25

dreamweiver

6,002
2
24
39

score 0 · Answer 10 · answered Jul 24 '19 at 09:15

0

you could use this:

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

answered Jul 24 '19 at 09:15

Mohsin AR

2,998
2
24
36

Listen to bootstrap checkbox being checked

10 Answers10