CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Jaanus
Jaanus

Reputation: 16541

Listen to bootstrap 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: 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?

Upvotes: 3

Views: 47888

Answers (10)

Mohsin AR
Mohsin AR

Reputation: 3108

you could use this:

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

Upvotes: 0

Laura Chesches
Laura Chesches

Reputation: 2583

This worked for me

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

Upvotes: 3

johnny 5
johnny 5

Reputation: 20995

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

Upvotes: 3

metamagikum
metamagikum

Reputation: 1358

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

Upvotes: 2

Chris Edwards
Chris Edwards

Reputation: 3602

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

Upvotes: 3

Srihari
Srihari

Reputation: 766

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/

Upvotes: 1

dreamweiver
dreamweiver

Reputation: 6002

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

Upvotes: 1

Jaanus
Jaanus

Reputation: 16541

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

Upvotes: 2

Yabada
Yabada

Reputation: 1758

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

Upvotes: 1

CodexVarg
CodexVarg

Reputation: 510

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

i solve it that way.

Upvotes: 11

Related Questions