jquery - 构建 "select all"复选框的最佳方法

Question

我有一个“全选”复选框(A) 和其他一些与之相关的复选框(B)。

我希望:

1. 当A勾选或不勾选时，使B全部与A相同。
2. 检查完所有 B 后，再检查 A。
3. 当未检查完所有 B 时，不检查 A。

首选使用 JQuery，但是 HTML5 有更好的方法吗？

喜欢:

<checkbox id="target" name="select all"/>
<checkbox relatetd="target" name="1"/>
<checkbox relatetd="target" name="2"/>

或者类似 xpath 的东西，如果我有许多具有不同 DOM 结构的子组:

<checkbox id="target" name="select all"/>
<div>
    <checkbox relatetd="../" name="1"/>
    <checkbox relatetd="../" name="2"/>
</div>

<checkbox id="target2" name="select all"/>
<div>
    <div>
        <checkbox relatetd="../../" name="1"/>
        <checkbox relatetd="../../" name="2"/>
    </div>
</div>

Answer 1

<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3




$('#checkAll').change(function () {
    $('.chk').prop('checked', this.checked);
});

$(".chk").change(function () {
    if ($(".chk:checked").length == $(".chk").length) {
        $('#checkAll').prop('checked', 'checked');
    } else {
        $('#checkAll').prop('checked', false);
    }
});

DEMO

这应该适合你