2

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

或者如果我有许多具有不同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>
4

4 回答 4

3 
<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);
    }
});

演示

这应该适合你

于 2013-07-11T09:50:16.120 回答
1

我会做这样的事情：

只需添加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

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

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

希望它有效。

于 2013-07-11T10:13:53.990 回答
0

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

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

于 2013-07-11T18:03:18.487 回答
0

这是一个明确的方法，复选框的 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>
于 2013-07-11T14:27:28.693 回答