Выделить все флажки без классов

Question

Мне нужно выбрать все флажки при проверке «.selectall», но, попробовав кучу разных способов размещения селекторов, я все равно не могу заставить его работать. Наверное, я не уверен, как организовать селектора, чтобы сказать это -> label -> input. Есть идеи? Спасибо.

$(document).ready(function() { 
 
    $('#selecctall').click(function(event) { //on click 
 
    if (this.checked) { // check select status 
 
     $('.iw_notify_heirarchical_list li').each(function() { //loop through each checkbox 
 
     $('input', this).checked = true; //select all checkboxes with class "checkbox1" 
 
     }); 
 
    } 
 
    }); 
 
});

<ul class="iw_notify_heirarchical_list"> 
 
    <label> 
 
    <input type="checkbox" id="selectall">All</label> 
 

 
    <li id="notifications-164"> 
 
    <label class="selectit"> 
 
     <input value="164" type="checkbox" name="tax_input[notifications][]" id="in-notifications-164" checked="checked">Calendar Events</label> 
 
    <ul class="children"> 
 

 
     <li id="notifications-173" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="173" type="checkbox" name="tax_input[notifications][]" id="in-notifications-173">Boards and Committees</label> 
 
     </li> 
 

 
     <li id="notifications-169" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="169" type="checkbox" name="tax_input[notifications][]" id="in-notifications-169">City Council</label> 
 
     </li> 
 

 
     <li id="notifications-171" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="171" type="checkbox" name="tax_input[notifications][]" id="in-notifications-171" checked="checked">City Events</label> 
 
     </li> 
 

 
     <li id="notifications-172"> 
 
     <label class="selectit"> 
 
      <input value="172" type="checkbox" name="tax_input[notifications][]" id="in-notifications-172">Community Events</label> 
 
     </li> 
 

 
     <li id="notifications-170" class="popular-category"> 
 
     <label class="selectit"> 
 
      <input value="170" type="checkbox" name="tax_input[notifications][]" id="in-notifications-170">Departments</label> 
 
     <ul class="children"> 
 

 
      <li id="notifications-174"> 
 
      <label class="selectit"> 
 
       <input value="174" type="checkbox" name="tax_input[notifications][]" id="in-notifications-174" checked="checked">Executive</label> 
 
      </li> 
 

 
      <li id="notifications-175"> 
 
      <label class="selectit"> 
 
       <input value="175" type="checkbox" name="tax_input[notifications][]" id="in-notifications-175">Finance</label> 
 
      </li> 
 

 
      <li id="notifications-176"> 
 
      <label class="selectit"> 
 
       <input value="176" type="checkbox" name="tax_input[notifications][]" id="in-notifications-176">Fire</label> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 

 
    <li id="notifications-165"> 
 
    <label class="selectit"> 
 
     <input value="165" type="checkbox" name="tax_input[notifications][]" id="in-notifications-165">Employment Opportunities</label> 
 
    </li> 
 

 
    <li id="notifications-163" class="popular-category"> 
 
    <label class="selectit"> 
 
     <input value="163" type="checkbox" name="tax_input[notifications][]" id="in-notifications-163" checked="checked">News</label> 
 
    </li> 
 

 
    <li id="notifications-168"> 
 
    <label class="selectit"> 
 
     <input value="168" type="checkbox" name="tax_input[notifications][]" id="in-notifications-168">None</label> 
 
    </li> 
 

 
    <li id="notifications-166"> 
 
    <label class="selectit"> 
 
     <input value="166" type="checkbox" name="tax_input[notifications][]" id="in-notifications-166">Weekly Calendar Events</label> 
 
    </li> 
 
</ul>

Answer 1

Вы не используете правильный синтаксис JQuery, чтобы проверить флажок.

$('input', this).checked = true; 

должно быть

$('input', this).prop('checked', true); 

checked является элементом свойство DOM, не является свойством JQuery.

Вам также не нужно .each, потому что методы jQuery могут быть вызваны в коллекции, и они будут обновлять все выбранные элементы. Поэтому вы можете просто написать:

$('.iw_notify_heirarchical_list li :checkbox').prop('checked', true);