取消选中所有项目的复选框

Question

I have the two checkboxes with checkAll and clearAll option. When I click the geo clear all I want to clear the only geo checkboxes.

 $(document).ready(function(){ $('span[data-action="clearAll"]').click(function(event) { $('span[data-action="clearAll"]').hide(); $('span[data-action="checkAll"]').show(); $(this).siblings("input:checkbox").each(function(){ $(this).prop("checked",false); $(this).parent('li').css('background-color','transparent'); }); }); $('span[data-action="checkAll"]').click(function(event) { $('span[data-action="checkAll"]').hide(); $('span[data-action="clearAll"]').show(); $(this).siblings("input:checkbox").each(function(){ $(this).prop("checked",true); }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <div id="geo" class="checklistContainer" showselecteditems="true" style="width: 194.5px;"> <div class="findInList" id="geo_findInListDiv"><input type="text" value="Type here to search list..." id="geo_findInList" class="contains-placeholder blurred" style="width: 188.5px;"></div> <div class="actionButtons" id="geo_actionButtons"><span data-action="checkAll" style="">Check all</span> <span data-action="clearAll" style="display: none;">Uncheck all</span> </div> <div id="geo_checklist" class="checklist checklistHighlighted" style="position: relative; height: 70px; width: 196.5px;"> <ul class="checklist"> <li tabindex="0" class="even checked" style="background-color: transparent;"><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" checked="checked"><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li> <li tabindex="0" class="even checked" style="background-color: transparent;"><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" checked="checked"><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li> </ul> </div> </div> <div id="types" class="checklistContainer" showselecteditems="true" style="width: 194.5px;"> <div class="findInList" id="types_findInListDiv"><input type="text" value="Type here to search list..." id="types_findInList" class="blurred contains-placeholder" style="width: 188.5px;"></div> <div class="actionButtons" id="types_actionButtons"><span data-action="checkAll" style="">Check all</span> <span data-action="clearAll" style="display: none;">Uncheck all</span> </div> <div id="types_checklist" class="checklist" style="position: relative; height: 70px; width: 196.5px;"> <ul class="checklist"> <li tabindex="0" class="even" style="background-color: transparent;"><input type="checkbox" value="Uncategorized_lead" name="types[]" id="types_Uncategorized_lead" checked="checked"><label for="types_Uncategorized_lead" class="leaveRoomForCheckbox">test</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="Hold/Uncategorized" name="types[]" id="types_Hold_Uncategorized" checked="checked"><label for="types_Hold_Uncategorized" class="leaveRoomForCheckbox">test demo</label></li> <li tabindex="0" class="even" style="background-color: transparent;"><input type="checkbox" value="RGL" name="types[]" id="types_RGL" checked="checked"><label for="types_RGL" class="leaveRoomForCheckbox">test0</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="PGL" name="types[]" id="types_PGL" checked="checked"><label for="types_PGL" class="leaveRoomForCheckbox">test1</label></li> <li tabindex="0" class="even" style="background-color: transparent;"><input type="checkbox" value="MGL" name="types[]" id="types_MGL" checked="checked"><label for="types_MGL" class="leaveRoomForCheckbox">test2</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="1st_Presentation_/_Meeting" name="types[]" id="types_1st_Presentation_Meeting" checked="checked"><label for="types_1st_Presentation_Meeting" class="leaveRoomForCheckbox">test 3</label></li> </ul> </div> </div>

If I use $("input:checkbox").each() instead of $(this).siblings("input:checkbox") .It clear the all check box

Answer 1

I think you can do it like below snippet easily. You don't need the each loop.

I have done an update after reviewing the question again. This resolves the issue as I see it. If anything please feel free to comment.

 $(document).ready(function(){ $('span[data-action="clearAll"]').click(function(event) { $(this).hide(); $(this).siblings('span[data-action="checkAll"]').show(); toggleCheckboxes($(this), false); }); $('span[data-action="checkAll"]').click(function(event) { $(this).hide(); $(this).siblings('span[data-action="clearAll"]').show(); toggleCheckboxes($(this), true); }); function toggleCheckboxes(node, check) { $(node).closest('.checklistContainer').find("ul.checklist input:checkbox").prop('checked', check); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="geo" class="checklistContainer" showselecteditems="true" style="width: 194.5px;"> <div class="findInList" id="geo_findInListDiv"><input type="text" value="Type here to search list..." id="geo_findInList" class="contains-placeholder blurred" style="width: 188.5px;"></div> <div class="actionButtons" id="geo_actionButtons"><span data-action="checkAll" style="">Check all</span> <span data-action="clearAll" style="display: none;">Uncheck all</span> </div> <div id="geo_checklist" class="checklist checklistHighlighted" style="position: relative; height: 70px; width: 196.5px;"> <ul class="checklist"> <li tabindex="0" class="even checked" style="background-color: transparent;"><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" checked="checked"><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li> <li tabindex="0" class="even checked" style="background-color: transparent;"><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" checked="checked"><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li> </ul> </div> </div> <div id="types" class="checklistContainer" showselecteditems="true" style="width: 194.5px;"> <div class="findInList" id="types_findInListDiv"><input type="text" value="Type here to search list..." id="types_findInList" class="blurred contains-placeholder" style="width: 188.5px;"></div> <div class="actionButtons" id="types_actionButtons"><span data-action="checkAll" style="">Check all</span> <span data-action="clearAll" style="display: none;">Uncheck all</span> </div> <div id="types_checklist" class="checklist" style="position: relative; height: 70px; width: 196.5px;"> <ul class="checklist"> <li tabindex="0" class="even" style="background-color: transparent;"><input type="checkbox" value="Uncategorized_lead" name="types[]" id="types_Uncategorized_lead" checked="checked"><label for="types_Uncategorized_lead" class="leaveRoomForCheckbox">test</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="Hold/Uncategorized" name="types[]" id="types_Hold_Uncategorized" checked="checked"><label for="types_Hold_Uncategorized" class="leaveRoomForCheckbox">test demo</label></li> <li tabindex="0" class="even" style="background-color: transparent;"><input type="checkbox" value="RGL" name="types[]" id="types_RGL" checked="checked"><label for="types_RGL" class="leaveRoomForCheckbox">test0</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="PGL" name="types[]" id="types_PGL" checked="checked"><label for="types_PGL" class="leaveRoomForCheckbox">test1</label></li> <li tabindex="0" class="even" style="background-color: transparent;"><input type="checkbox" value="MGL" name="types[]" id="types_MGL" checked="checked"><label for="types_MGL" class="leaveRoomForCheckbox">test2</label></li> <li tabindex="0" class="odd" style="background-color: transparent;"><input type="checkbox" value="1st_Presentation_/_Meeting" name="types[]" id="types_1st_Presentation_Meeting" checked="checked"><label for="types_1st_Presentation_Meeting" class="leaveRoomForCheckbox">test 3</label></li> </ul> </div> </div>