构建“全选”复选框的最佳方法答案

【问题标题】：Best way to build a "select all" checkbox构建“全选”复选框的最佳方法
【发布时间】：2013-07-11 09:42:20
【问题描述】：

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

我希望：

无论A是否被勾选，B都和A一样。
当所有 B 都被选中时，让 A 被选中。
如果没有选中所有 B，则不选中 A。

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

喜欢：

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

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

<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>

【问题讨论】：

标签： jquery html checkbox

【解决方案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

这应该适合你

【讨论】：

谢谢，它确实有效！但是如果有很多子组，我将不得不准备很多不同的 css 类。
嘿，你可以看看这个代码示例jsfiddle.net/PTSkR/150 可能对你有用，如果你的问题得到解决，你能把我的解决方案标记为正确

【解决方案2】：

我会这样做：

只需将data-parent="< value of the parent >" 添加到任何孩子checkbox 中，例如：

<label class="checkbox">
  <input type="checkbox" value="A"> <b>Option A</b>
</label>
<label class="checkbox">
  <input type="checkbox" value="A1" data-parent="A"> Option A.1
</label>

JsBin DEMO 拥有所有代码：http://jsbin.com/opexof/1

演示脚本已被注释掉，因此您可以看到发生了什么，但总体思路是：

检查是孩子还是父母
如果是孩子，查看有多少个兄弟，并与检查的兄弟数比较
- 如果数字匹配，则选择它的父代
- 如果没有，则取消选择
如果是父级，则选择所有子级或不选择所有子级，具体取决于您选择还是取消选择父级。

希望它有效。

【讨论】：

很好，但是在一些复杂的场景中，每个子组都有不同的 DOM 结构。如何保持 js 代码可重用？

【解决方案3】：

似乎你有你的答案，但我会给你另一个变化以防万一：

//Fill in all check marks for the Copy Feature when "select all" is chosen
$('#all').click(function(){
    var isChecked = $(this).is(':checked');
    $.each($('input[type="checkbox"][id^="copy_"]'),function(){
        $(this).attr('checked', isChecked);
    })
    if (isChecked){
        $('#labelAll').html('Unselect All');
    }else{
        $('#labelAll').html('Select All');
    }
});

jsfiddle

【讨论】：

对不起，不满足要求3。还是谢谢大家！

【解决方案4】：

这是一个明确的方法，4个用于复选框的css类：

family,parent,child 关系，
和invalid 表示状态。

选中parent 表示全选族中的有效复选框。它支持嵌套族。

演示：http://jsfiddle.net/doraeimo/c4K4E/

<fieldset class="family" >
<legend>big_family</legend>
<label>select all
    <input type="checkbox" class="parent" name="select_all"/>
</label>

<fieldset class="family">
    <legend>sub_family_1</legend>
    <label>select all
        <input type="checkbox" class="parent"/>
    </label>
    <div>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child invalid"/>
    </div>
</fieldset>

<fieldset class="family">
    <legend>sub_family_2</legend>
    <label> select all
        <input type="checkbox" class="parent"/>
    </label>
    <div>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child"/>
        <input type="checkbox" class="child invalid"/>
    </div>
</fieldset>

</fieldset>

【讨论】：