复选框的onclick事件如何实现取消其他复选框的选中状态

Question

我有6个复选框，每个对应一周中的一个工作日，并且还有一个名为“全部”的复选框。

我的需求是，如果有人点击了“全部”复选框，我希望能够取消所有其他复选框的选择状态。

例如，如果有人已经勾选了星期一和星期三的复选框，然后再点击“全部”复选框，那么星期一和星期三的复选框应该被取消勾选状态。

谢谢！

- Chris

---

通常情况下，当用户想要选中所有复选框时，会选择“全部选中”。这是您想要的吗？ - rahul

我本来会这样做……但是我为之工作的人希望它反过来，当用户点击“全部”时，所有其他复选框都取消选中，除了“全部”这一个。 - Chris

你在哪个部分遇到了困难？或者我们直接给你代码？ - Brad Mace

Answer 1

这可能不是你想要的，但似乎更加合理。

HTML（超文本标记语言）

<input type="checkbox" id="chkAll" />
<br />
<input type="checkbox" id="chkMonday" class="child" />
<input type="checkbox" id="chkTuesday" class="child" />
<input type="checkbox" id="chkWednesday" class="child" />
<input type="checkbox" id="chkThursday" class="child" />
<input type="checkbox" id="chkFriday" class="child" />
<input type="checkbox" id="chkSaturday" class="child" />
<input type="checkbox" id="chkSunday" class="child" />

jQUery

$(function(){
    $("#chkAll").change(function(){
        if (this.checked) {
            $("input:checkbox.child").attr("checked", "checked");
        }
        else {
            $("input:checkbox.child").removeAttr("checked");
        }
    });
});

查看实际演示

查看更新版本，该版本还处理了子复选框的更改。

- rahul

---

这并不完全是 OP 想要的，但它应该能给他指引。 - RageZ

太好了，完美无缺...只需要稍微修改一下，但是非常感谢。 - Chris

Answer 2

使用jQuery和类似以下的代码应该可以解决问题。

$('#all-id').change(function(){
   if($('#all-id').is(':checked')){
     if($('#monday-id').is(':checked')){
        $('#monday-id').attr('checked', false);
     } else {
       $('#monday-id').attr('checked', true);
     }
     // etc
   }
});

接下来，您可能希望将所有 ID 存储在一个数组中，并设置循环，或者调整文档结构以便能够轻松地循环处理所有这些复选框

- RageZ