Question

我的复选框有问题。我想在选中第一个复选框时检查所有内容。这是我的代码

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

我尝试使用此代码但不起作用

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

Answer 1

试试这个，你需要在第一个复选框上绑定一个click事件。点击第一个复选框，检查是否已选中！如果是，则找到所有复选框以继续。

$('#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);
      });
    }
});

Answer 2

jQuery让这件事变得轻而易举。

$(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
        }
    });
});

选中第一个复选框后全部选中

2 个答案: