jQuery檢查表中的所有復選框

我有一個表，表頭中有一個復選框，我想用它來選中/取消選中我表中的所有復選框。這是我的代碼，但它不起作用。

$(document).on('change', '#select_products_checkbox', function() {
  $('.form-control').toggleClass('selected');
  var selectAllProductsIsChecked = $('#select_products_checkbox').prop('checked');
  
  $('.form-control .form-control').each(function(i, v) {
    $(v).prop('checked', selectAllProductsIsChecked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <td class="col-md-1">
        <input class="form-control" type="checkbox" id="select_products_checkbox">
      </td>
      <td class="col-md-1 text-center">{t}Product ID{/t}</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
      </td>
      <td class="text-center">
        {$productID}
      </td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

如果您將事件傳遞給更改功能，您可以使用 currentTarget checked 在其他復選框上設定您的已選中道具：

$(document).on('change', '#select_products_checkbox', function(e) {
  $('.form-control')
    .toggleClass('selected', e.currentTarget.checked)
    .prop('checked', e.currentTarget.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <td class="col-md-1">
        <input class="form-control" type="checkbox" id="select_products_checkbox">
      </td>
      <td class="col-md-1 text-center">{t}Product ID{/t}</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
      </td>
      <td class="text-center">
        {$productID}
      </td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

要執行您需要的操作，您可以使用closest()和find()方法在tbody與“全部”復選框相關的表中查找復選框。然后你可以使用prop()來設定它們的checked狀態來匹配。同樣，您可以提供一個布林值來toggleClass()根據是否選中“全部”來添加或洗掉類。

$(document).on('change', '#select_products_checkbox', function() {  
  $(this).closest('table').find('tbody :checkbox')
    .prop('checked', this.checked)
    .toggleClass('selected', this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <td class="col-md-1">
        <input class="form-control" type="checkbox" id="select_products_checkbox">
      </td>
      <td class="col-md-1 text-center">{t}Product ID{/t} - SELECT ALL</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
      </td>
      <td class="text-center">
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
      </td>
      <td class="text-center">
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
      </td>
      <td class="text-center">
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
      </td>
      <td class="text-center">
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
      </td>
      <td class="text-center">
        {$productID}
      </td>
    </tr>
  </tbody>
</table>

標籤：javascript jQuery

上一篇：在選單Jquery上顯示當前頁面

下一篇：如何增加按鈕的urlonclicknext