听取检查的bootstrap复选框

Question

我使用的引导主题叫做:Core Admin http://wrapbootstrap.com/preview/WB0135486

这是我写的代码:

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

并且bootstrap生成这个代码:

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

这是结果:

所以基本上它给我一个漂亮的复选框.每次我点击复选框,它都会checked向div 添加一个类:

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

所以起初我想听这样改变的输入字段

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

    }
});

但它实际上并没有改变输入字段,而是改变了<div>元素的类.

我怎么能听到复选框被检查？

Answer 1

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

我这样解决.