javascript - 收听正在检查的 Bootstrap 复选框

Question

我正在使用名为:Core Admin 的 Bootstrap 主题 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');
    }
});

我就是这样解决的。