Question

我有一个“全选”复选框（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"/>

如果我有很多具有 DIFFERENT 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>

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

这应该对你有用

Answer 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

演示脚本已注释掉，以便您可以看到正在发生的事情，但总体思路是：

检查是儿童还是父母
如果是孩子，看看有多少兄弟存在，并与检查了多少兄弟进行比较
- 如果数字匹配，请选择它的父级
- 如果没有，未选中
如果是父母，请根据您选择或取消选择父母来选择所有孩子。

希望它有效。

Answer 3

这是一个明确的方法，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>

Answer 4

好像你有答案，但我会给你另一种变化，以防万一：

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

建立一个＆＃34;选择所有＆＃34;的最佳方式复选框

4 个答案: