alle aktiviert, wenn das erste Kontrollkästchen aktiviert

Question

Ich habe ein Problem mit Kontrollkästchen. Ich möchte alle überprüfen, wenn das erste Kontrollkästchen aktiviert ist. dies ist mein Code

<tr> 
    <td><label for="">Pilih Pendidikan</label></td> 
    <td style="text-align:left;"> 
    <input type="checkbox" id="pilih_semua_pdk">Pilih Semua 
    <?php foreach ($query2 as $row2) {?> 
     <input class="form-control required check_pdk" type="checkbox" name="pendidikan[]" value="<?php echo $row2[id_pendidikan]; ?>" 
      <?php 
      $pendidikan = $_POST[pendidikan]; 
       if ($pendidikan !=NULL) { 
        foreach($pendidikan as $pendidikan){ 
        if ($pendidikan == $row2[id_pendidikan]) { 
         echo "checked"; 
        } 
       } 
       } 
      ?> 
     ><?php echo $row2[nama_pendidikan]; ?> 
    <?php } ?> 
    </td> 
</tr> 

ich diesen Code versuchen, aber nicht funktioniert

<script> 
    $("#pilih_semua_pdk").click(function() { 
     $(".check_pdk").prop('checked', $(this).prop('checked')); 
</script> 

Answer 1

jQuery macht das ein Stück Kuchen.

$(document).ready(function(){ 
    // DOM has been loaded, attach click event for first checkbox 

    $('#pilih_semua_pdk').on('click', function(){ 
     // verify if it is checked 
     if($(this).is(':checked')) 
     { 
      // check/tick the remaining checkboxes of the same td 
      $(this).siblings('.check_pdk').prop('checked', 'checked'); 
     } 
     else 
     { 
      // do something when the first checkbox is unchecked 
     } 
    }); 
}); 

Answer 2

die Sie interessieren, benötigen Sie einen Click-Ereignis auf erste Kontrollkästchen zu binden. Klicken Sie auf das erste Kontrollkästchen, um zu prüfen, ob das Kontrollkästchen aktiviert ist. Wenn ja, dann finden Sie alle Kontrollkästchen, um loszulegen.

$('#pilih_semua_pdk').on('click', function(){ 
    if($(this).is(':checked')) 
    { 
     //find parent td and its all checkboxes excluding first 
     $(this).parent().find('input[type=checkbox]').not('#pilih_semua_pdk').each(function(){ 
      $(this).prop('checked', true); 
     }); 
    } 
});