使用jQuery选择All复选框

Question

我有以下HTML代码:

    <input type="checkbox" id="ckbCheckAll" />
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

当用户检查时,ckbCheckAll必须选中所有复选框.我还有以下jquery代码:

    $(document).ready(function () {
        $("#ckbCheckAll").click(function () {
            $(".checkBoxClass").attr('checked', this.checked);
        });
    });

当我在浏览器中看到我的页面时,我得到以下结果:在第一次单击ckbCheckAll所有复选框时检查(这是正确的).在第二次单击ckbCheckAll所有复选框时未选中(这是正确的).但是在第3次尝试中没有发生任 也是在第四次尝试中没有发生任何事情等等.

问题出在哪儿？

Answer 1

使用道具

$(".checkBoxClass").prop('checked', true);

或取消选中:

$(".checkBoxClass").prop('checked', false);

http://jsfiddle.net/sVQwA/

$("#ckbCheckAll").click(function () {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
});

更新了JSFiddle链接:http://jsfiddle.net/sVQwA/1/

Answer 2

使用以下代码..

        $('#globalCheckbox').click(function(){
            if($(this).prop("checked")) {
                $(".checkBox").prop("checked", true);
            } else {
                $(".checkBox").prop("checked", false);
            }                
        });


        $('.checkBox').click(function(){
            if($(".checkBox").length == $(".checkBox:checked").length) {
                $("#globalCheckbox").prop("checked", true);
            }else {
                $("#globalCheckbox").prop("checked", false);            
            }
        });

Answer 3

这是一个简单的方法来做到这一点：

网址：

<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>

查询：

$(document).ready(function(){
$("#selectall").click(function(){
        if(this.checked){
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', true);
            })
        }else{
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', false);
            })
        }
    });
});