Question

我有一个HTML表单，我想在点击父级后检查所有孩子。父母应该是链接。到目前为止，我设法做到这一点，但父母也包含复选框。这是我的代码：

<input type="checkbox" name="rights[]" value="1" class='selectAll' data-checkbox-name='c1' /><strong>Parent 1</strong>
<input type="checkbox" name="rights[]" value="2" class='c1' />Child 1.1
<input type="checkbox" name="rights[]" value="2" class='c1' />Child 1.2

<input type="checkbox" name="rights[]" value="1" class='selectAll' data-checkbox-name='c2' /><strong>Parent 2</strong>
<input type="checkbox" name="rights[]" value="2" class='c2' />Child 2.1
<input type="checkbox" name="rights[]" value="2" class='c2' />Child 2.2
<script>
      $(':checkbox.selectAll').on('click', function(){
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked")).trigger("change");
      });
</script>

所以我想以父母的身份结束。有人能帮我吗？感谢。

Answer 1

将父级更改为<a/>标记。简单。我冒昧地制作你的HTML语义，比如为复选框旁边的文本添加标签等等。所以现在我有这样的结构：

<div class="set"> 
    <a href="#" class="parent">Parent1</a>
    <div>
        <input type="checkbox" name="rights[]" value="2" class='c1' id="c1-1" />
        <label for="c1-1">Child 1.1</label>
        <br/>
        <input type="checkbox" name="rights[]" value="2" class='c1' id="c1-2" />
        <label for="c1-2">Child 1.2</label>
    </div>
</div>

你会尽可能多地重复这个。请注意标签中的for属性。这也很重要，因为当你点击一个标签时，它会自动检查/取消选中与之对应的复选框。您的点击事件如下：

  $('.set').on('click', ".parent", function () {
      //get the checkboxes from the neighboring <div>
      var $checkboxes = $(this).next().children("[type=checkbox]");
      //check the state of the checkbox (this will give out only the first checkbox, but thats ok for our cause)
      var isChecked = $checkboxes.prop("checked");
      //invert the checked property based on isChecked variable.
      $checkboxes.prop("checked", !isChecked);
  });

我将其绑定到.set的原因是因为称为事件委派的事情。它在这个问题中并不重要，但这使得代码更清晰（在我看来）。点击也可能如下所示：

$(".parent").click(function() { ..

演示：http://jsfiddle.net/hungerpain/b6AQr/1/

Answer 2

您也可以尝试此操作（nextUntil('a.selectAll')将选择a.selectAll之前的所有复选框）

$('.selectAll').on('click', function(e){
    e.preventDefault();
    $(this).nextUntil('a.selectAll').prop('checked', function(){
        return !this.checked;
    });
});

DEMO.

更新：

您可以尝试使用此备选方案，请注意data-checkbox-name='c1'代码

中的a

HTML：

<a href="#" class='selectAll' data-checkbox-name='c1'>Parent</a>
<input type="checkbox" name="rights[]" value="2" class='c1' />Child 1.1
<input type="checkbox" name="rights[]" value="2" class='c1' />Child 1.2

JS：

$('.selectAll').on('click', function(e){
    e.preventDefault();
    var t = $(this), cls = t.attr('data-checkbox-name');
    $(':checkbox.'+cls).prop('checked', function(){
        return !this.checked;
    });
});

DEMO.

Jquery复选框选择所有子项

2 个答案:

更新：