jQuery check all checkboxes in table-CodePudding

I have a table with a checkbox in the table head which I want to use to check/uncheck all the checkboxes in my table. This is my code, but it doesn't work.

$(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 >
  <thead>
    <tr>
      <td >
        <input  type="checkbox" id="select_products_checkbox">
      </td>
      <td >{t}Product ID{/t}</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}"  type="checkbox">
      </td>
      <td >
        {$productID}
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

if you pass your event into the change function you can just use the currentTarget checked to set your checked prop on your other checkboxes:

$(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 >
  <thead>
    <tr>
      <td >
        <input  type="checkbox" id="select_products_checkbox">
      </td>
      <td >{t}Product ID{/t}</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}"  type="checkbox">
      </td>
      <td >
        {$productID}
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

To do what you require you can use the closest() and find() methods to find the checkboxes in the tbody of the table related to the 'All' checkbox. Then you can use prop() to set their checked state to match. Similarly you can provide a boolean to toggleClass() to add or remove the class based on whether or not the 'All' was checked.

$(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 >
  <thead>
    <tr>
      <td >
        <input  type="checkbox" id="select_products_checkbox">
      </td>
      <td >{t}Product ID{/t} - SELECT ALL</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}"  type="checkbox">
      </td>
      <td >
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}"  type="checkbox">
      </td>
      <td >
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}"  type="checkbox">
      </td>
      <td >
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}"  type="checkbox">
      </td>
      <td >
        {$productID}
      </td>
    </tr>
    <tr>
      <td>
        <input name="{$price_list_products_checkbox}[]" value="{$productID}"  type="checkbox">
      </td>
      <td >
        {$productID}
      </td>
    </tr>
  </tbody>
</table>