Jquery复选框选中所有子项

Jquery checkbox select all children

本文关键字：复选框 Jquery      更新时间：2023-09-26

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

http://jsfiddle.net/b6AQr/

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

所以我想以锚定的父母结束。有人能帮我吗？谢谢

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

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

演示

更新：

你可以尝试这个替代方案，注意a标签中的data-checkbox-name='c1'

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

演示

将父标记更改为<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/

您可以使用replaceWith函数

    $(':checkbox.selectAll').on('click', function(){
    $(':checkbox[class='+ $(this).data('checkbox-name') + ']').prop("checked",   $(this).prop("checked")).trigger("change");
      $(this).replaceWith("<a class='selectAll'>"+$(this).text()+"</a>");
  });

http://jsfiddle.net/b6AQr/2/

相关文章：