Aktivieren Sie alle Kontrollkästchen ohne Klassen

Question

Ich muss alle Kontrollkästchen aktivieren, wenn Sie ".selectall" auswählen, aber nachdem ich eine Reihe verschiedener Möglichkeiten zur Anordnung der Selektoren versucht habe, kann ich es immer noch nicht zum Laufen bringen. Ich bin mir nicht sicher, wie man die Selektoren anordnet, um das zu sagen -> Label -> Eingabe. Irgendwelche Ideen? Vielen Dank.

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

Sie verwenden die richtige jQuery-Syntax nicht ein Kontrollkästchen zu überprüfen.

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

sollte

seine

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

checked ist eine DOM-Element Eigenschaft, keine jQuery Eigenschaft.

Sie benötigen auch nicht .each, da jQuery-Methoden für eine Sammlung aufgerufen werden können und alle ausgewählten Elemente aktualisiert werden. So können Sie einfach schreiben:

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