Select all checkboxes in closest div

Question

I've been trying to get this to work from other posts, but keep running into a wall.

I have an "All" button, that I'd like select all or unselect all in the closest div class of "apply_all"

I'm trying to make this work with a long set of appended divs

  $(document).on('change', '.applyallsearches', (function() { var applyallchecks = $(this).closest('.applyall'); if (this.checked) { applyallchecks.find('input:checkbox').attr('checked'); } else { applyallchecks.find('input:checkbox').removeAttr('checked'); } }) ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pet_selection"> Select pets<BR> <div> <input type="checkbox" class="applyallsearches" value="all">All </div> <div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR> </div> <BR>Select pets<BR> <div> <input type="checkbox" class="applyallsearches" value="all">All </div> <div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR> </div> <BR>Select pets<BR> <div> <input type="checkbox" class="applyallsearches" value="all">All </div> <div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR> </div> </div> 

Answer 1

You can go up with the function $.closest() and then find the next siblings using the function $.next() to select the desired checkboxes.

 //Event delegation $(document).on('change', '.applyallsearches', function() { $(this).closest('div') .next('div.applyall') .find('[name="apply_all"]') .prop('checked', $(this).prop('checked')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Select pets<BR><div> <input type="checkbox" class="applyallsearches" value="all">All</div><div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR></div><BR>Select pets<BR><div> <input type="checkbox" class="applyallsearches" value="all">All</div><div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR></div><BR>Select pets<BR><div> <input type="checkbox" class="applyallsearches" value="all">All</div><div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR></div> 

Answer 2

Here you go: (this will work even for appended divs also)

 $(document).on('change', '.applyallsearches', function() { var applyallchecks = $(this).parents('.search-sec').find('[name="apply_all"]'); if (this.checked) { applyallchecks.prop('checked','checked'); } else { applyallchecks.removeAttr('checked'); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Select pets<BR> <div class="search-sec"> <div> <input type="checkbox" class="applyallsearches" value="all">All </div> <div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR> </div> </div> <BR>Select pets<BR> <div class="search-sec"> <div> <input type="checkbox" class="applyallsearches" value="all">All </div> <div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR> </div> </div> <BR>Select pets<BR> <div class="search-sec"> <div> <input type="checkbox" class="applyallsearches" value="all">All </div> <div class="applyall"> <input type="checkbox" name="apply_all" value="1">Pet 1<BR> <input type="checkbox" name="apply_all" value="2">Pet 2<BR> <input type="checkbox" name="apply_all" value="3">Pet 3<BR> <input type="checkbox" name="apply_all" value="4">Pet 4<BR> <input type="checkbox" name="apply_all" value="5">Pet 5<BR> <input type="checkbox" name="apply_all" value="6">Pet 6<BR> <input type="checkbox" name="apply_all" value="7">Pet 7<BR> <input type="checkbox" name="apply_all" value="8">Pet 8<BR> </div> </div>