Question

我有一个CheckBoxes列表，它们由“master”CheckBox打开/关闭。我正在使用jQuery来做这件事并且效果很好。

我想要完成的是在取消选中列表中的任何CheckBox时关闭“master”CheckBox。同样，如果所有CheckBox都被“检查”，我也想检查“master”CheckBox。这样，主CheckBox不仅可以一起打开/关闭所有CheckBox，还可以检查所有CheckBox是否都被指示。

这是我当前的代码切换复选框...

<input id="MasterCheckbox" type="checkbox" onclick="toggleChecked(this.checked)" />

<input id="checkbox1" type="checkbox" class="checkboxlistitem" />
<input id="checkbox2" type="checkbox" class="checkboxlistitem" />
<input id="checkbox3" type="checkbox" class="checkboxlistitem" />

jQuery函数

function toggleChecked(status) {
  $(".checkboxlistitem").each(function () {
    $(this).attr("checked", status);
  })
}

有关如何让主CheckBox根据其控制的复选框列表的状态进行切换的任何建议？沮丧的声音！那是一个Checkbox绕口令。

Answer 1

$("#MasterCheckbox").change(function() {
    $(".checkboxlistitem").attr("checked", this.checked);
});

$(".checkboxlistitem").change(function() {
    $("#MasterCheckbox").attr("checked", $(".checkboxlistitem:checked").length == $(".checkboxlistitem").length);
});

You can try it here.

Answer 2

试试这个：

$("#MasterCheckbox").attr("checked", $(".checkboxlistitem:not(:checked)").length==0)

示例代码：

<input id="MasterCheckbox" type="checkbox" onclick="toggleChecked(this.checked)" />  
<input id="checkbox1" type="checkbox" class="checkboxlistitem" /> 
<input id="checkbox2" type="checkbox" class="checkboxlistitem" /> 
<input id="checkbox3" type="checkbox" class="checkboxlistitem" /> 

    <script type="text/javascript">  

        function verifyMasterCheckbox() {
                $("#MasterCheckbox").attr("checked", $(".checkboxlistitem:not(:checked)").length == 0);
        }

        $(function() {
                $(".checkboxlistitem").click(function() {
                        verifyMasterCheckbox();
                });
        });
    </script>

如何使用jQuery切换主Checkbox的状态

2 个答案: