Question

我不知道如何在jquery中为复选框

进行编码

<p class="list">
  <label for="chkSunday"><input type="checkbox" checked   name="chkday" id="chkday0" value="0" />All days</label>
  <label for="chkSunday"><input type="checkbox"  name="chkday" id="chkday1" value="1"  />Sunday</label>
  <label for="chkMonday"><input type="checkbox"  name="chkday" id="chkday2" value="2" />Monday</label>
  <label for="chkTuesday"><input type="checkbox"  name="chkday" id="chkday3" value="3" />Tuesday</label>
  <label for="chkWednesday"><input type="checkbox"  name="chkday" id="chkday4" value="4"  />Wednesday</label>
  <label for="chkThursday"><input type="checkbox"  name="chkday" id="chkday5" value="5" />Thursday</label>
  <label for="chkFriday"><input type="checkbox"  name="chkday" id="chkday6" value="6" />Friday</label>
  <label for="chkSaturday"><input type="checkbox"  name="chkday" id="chkday7" value="7"  />Saturday</label>
</p>

在上面的复选框中，我有一些用例：

用例1
- 用户选择当天的任何一天，然后取消选中“全部”复选框
用例2
- 用户取消选中所有天，然后选中“全部”复选框

我不知道如何在jQuery中处理这个问题。

Answer 1

我认为这就是你所追求的：

$(".list :checkbox").change(function() {
  if(this.id == "chkday0") $(".list :checkbox:gt(0)").attr("checked", false);
  $("#chkday0").attr("checked", $(".list :checkbox:gt(0):checked").length == 0);
});

You can test it out here。这样做是为change中的每个复选框绑定一个<p>处理程序。

如果是第一个（全部），请清除所有其他日子。
无论是哪一个，如果没有选择其他人，请检查第一个（如果没有天，请选中全部）。

另请注意，在演示中，<label>元素已更改...它们具有无效的for属性，并且由于它们包含了<input>，因此您可以删除{{ 1}}无论如何。

Answer 2

这与@Nick's answer非常相似，但避免了一些DOM选择。它假设一组静态元素。

示例： http://jsfiddle.net/patrick_dw/7UwLU/

var $allBoxes = $('p.list input:checkbox').change(function() {
    var $dayBoxes = $allBoxes.slice(1);
    if ($allBoxes[0].checked) $dayBoxes.not(this).attr('checked', '');
    $allBoxes[0].checked = !$dayBoxes.filter(':checked').length;
});

无需更改已接受的答案。只是换个方式。

需要jquery复选框操作帮助

2 个答案: