jQuery检查复选框不起作用

Question

我正在尝试使用JQuery 1.9.1在HTML表单上实现“全选”复选框。 据我所知，它应该像使用.prop来选中或取消选中复选框一样简单，但是我尝试执行的任何操作似乎都不起作用。

请查看下面的内容，我已经注释掉了一些失败的尝试，甚至连一个复选框都无法使它正常工作。 正确的方法是什么？ 我是否想念HTML中的某些内容？

的HTML

<input type="checkbox" id="cb_select_all" name="cb_select_all" value="t" />
<label for="cb_select_all"><b>Select All</b>
</label>
<br />
<input type="checkbox" name="cb1" id="cb1" class="cb_all" value="t" />
<label for="cb1">1 test</label>
<br />
<input type="checkbox" name="cb2" id="cb2" class="cb_all" value="t" />
<label for="cb2">2 test</label>

Java脚本

$(document).ready(function () {
    $("#cb_select_all").change(cb_select_all_onchange);
}); //end $(document).ready

function cb_select_all_onchange() {
    if ($("#cb_select_all").checked) {
        //$("#cb1").prop("checked", true);
        //$(".cb_all").each(function(){ this.checked = true; });
        //document.getElementById("cb1").checked = true;
        $(".cb_all").prop("checked", true);
    } else {
        $("#cb1").prop("checked", false);
    }
}

http://jsfiddle.net/mLnb5qed/5/

谢谢，jdt

Answer 1

更改if这个

if ($("#cb_select_all")[0].checked) { }

（或） if ($("#cb_select_all").is(":checked")) { }问题是第一个是本机元素的属性，而不是jQuery对象。 通过索引访问它可以使您使用该属性。 第二种方法是jQuery方法。

Answer 2

采用

$("#cb_select_all").is(':checked');

Answer 3

这对我有用：

 $(document).ready(function () {
        $("#cb_select_all").change(function () {
            if ($("#cb_select_all").prop("checked") == true) {
                $('.cb_all').prop('checked', true);
            }
            else {
                $('.cb_all').prop('checked', false);
            }
        });
    });

怎么了：

Check if the "cb_select_all" checkbox changes state
if the "checked" state is set to true
   check all "cb_all" checkboxes
else
   uncheck all "cb_all" checkboxes