Check all child checkbox using parent class

Question

When I click "Check all group 1", it should select its children only, but now it also selects "Check all group 2" items. How can I fix this?

Code:

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

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

_"it should selects their child only"_ There aren't any _child elements_ — Andreas, Jan 23 '18 at 08:35

Angel Politis · Answer 1 · 2018-01-23T08:51:58.787

I'm not sure what you expect your code to actually do, but in order to achieve what you want, all you have to do is:

Get the element with class extended-checkboxes following the clicked element and
Select its input children.

Something like the following:

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

Note: From jQuery 1.6 onwards, it is recommended to prefer prop instead of attr when trying to check checkboxes (See this comment).

[`.attr()` -> `.prop()`](https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Andreas, Jan 23 '18 at 08:47
Thanks for the suggestion @Andreas. I've cited you comment in the answer — Angel Politis, Jan 23 '18 at 08:52

Check all child checkbox using parent class

1 Answers1