uncheck the checkboxes for all item

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>