2

我有一个 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>

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

4

3 回答 3

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/

于 2013-07-27T15:33:02.370 回答
1

你也可以试试这个（nextUntil('a.selectAll')之前会选择所有的复选框a.selectAll）

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

演示。

更新 ：

您可以尝试这种替代方法，请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;
    });
});

演示。

于 2013-07-27T15:42:36.007 回答
0

你可以使用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/

于 2013-07-27T15:37:48.833 回答