Jquery - Select All checkbox nearest to selected element

Question

Used below to check All checkboxes inside "select-course-wrapper" div container.

if "business-management-select-all" checked, it have to select all checkboxes inside "select-course-wrapper". Uncheck means, uncheck all checkboxes within this container.

if "chemical-life-science-select-all" checked, it have to select all checkboxes inside "select-course-wrapper". Uncheck means, uncheck all checkboxes within this container.

 $('.Checkbox input[type=checkbox]').click(function(){ $(this).parent().closest('.select-course-wrapper').find(':checkbox').prop("checked", true); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="business-management-select-all" name="business-management-select-all" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Select all</div> <div class="select-course-wrapper"> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="business-management-accounting" name="business-management-accounting" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Accounting</div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="business-management-brand-management" name="business-management-brand-management" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Brand Management</div> </div> </div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-select-all" name="chemical-life-science-select-all" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Select all</div> <div class="select-course-wrapper"> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-accounting" name="chemical-life-science-accounting" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Accounting</div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-brand-management" name="chemical-life-science-brand-management" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Brand Management</div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-business-communications" name="chemical-life-science-business-communications" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Business Communications</div> </div> </div> </div>

Answer 1

You need to test if the $(".Checkbox input[type='checkbox']") than check or uncheck the other boxes based on its value, also you need to add .parent() you were looking inside the wrong div.

Try this:

 $(".Checkbox input[type='checkbox']").click(function(){ if (this.checked ) $(this).parent().parent().find(".select-course-wrapper input[type='checkbox']").prop("checked", true); else $(this).parent().parent().find(".select-course-wrapper input[type='checkbox']").prop("checked", false); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="business-management-select-all" name="business-management-select-all" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Select all</div> <div class="select-course-wrapper"> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="business-management-accounting" name="business-management-accounting" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Accounting</div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="business-management-brand-management" name="business-management-brand-management" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Brand Management</div> </div> </div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-select-all" name="chemical-life-science-select-all" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Select all</div> <div class="select-course-wrapper"> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-accounting" name="chemical-life-science-accounting" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Accounting</div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-brand-management" name="chemical-life-science-brand-management" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Brand Management</div> </div> <div class="form-group accordion-check"> <div class="Checkbox"> <input id="chemical-life-science-business-communications" name="chemical-life-science-business-communications" type="checkbox"> <div class="Checkbox-visible"></div> </div> <div class="checkbox-txt">Business Communications</div> </div> </div> </div>