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:

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?

Answer 1

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

i solve it that way.