Jquery - Select 最靠近所选元素的所有复选框

Question

下面用于检查“select-course-wrapper”div 容器中的所有复选框。

如果选中“business-management-select-all”，则必须 select “select-course-wrapper”中的所有复选框。 取消选中意味着，取消选中此容器中的所有复选框。

如果选中“化学生命科学全选”，则必须 select “选择课程包装器”内的所有复选框。 取消选中意味着，取消选中此容器中的所有复选框。

 $('.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

您需要测试$(".Checkbox input[type='checkbox']")是否根据其值选中或取消选中其他框，还需要添加.parent()您正在查看错误的 div。

尝试这个：

 $(".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>