Question

当我点击＆＃34;检查所有组1和＃34;时，它应该只选择其子项，但现在它也选择＆＃34;检查所有组2＆＃34;项目。我该如何解决这个问题？

代码：

＆＃13;

jQuery(".parentCheckAll").click(function(e) {
  jQuery("#" + jQuery(this).parent().parent().attr("id") + " .extended-checkboxes input[type='checkbox']").attr('checked', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentCheckAll"> Check all group 1</div>
<div class="extended-checkboxes">
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="1"><br />
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="2">
</div>
</div>

<div class="parentCheckAll"> Check all group 2</div>
<div class="extended-checkboxes">
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="3"><br />
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="4">
</div>

＆＃13;

Answer 1

我不确定您希望代码实际上做什么，但为了实现您想要的目标，您所要做的就是：

在点击的元素后面获取类extended-checkboxes的元素
选择其input个孩子。

如下所示：

/* ----- JavaScript ----- */
$(".parentCheckAll").click(function(e) {
  $(this.nextElementSibling).children("input[type='checkbox']").prop('checked', true);
});

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentCheckAll"> Check all group 1</div>
<div class="extended-checkboxes">
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="1"><br />
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="2">
</div>

<div class="parentCheckAll"> Check all group 2</div>
<div class="extended-checkboxes">
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="3">
  <br />
  <input name="" type="checkbox" item="" class="checkbox-meta" tabindex="4">
</div>

注意：从jQuery 1.6开始，建议您更喜欢prop 在尝试检查复选框（请参阅attr）时，而不是this comment。

使用父类检查所有子复选框

1 个答案: