'jQuery check all checkboxes in table

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

javascript jquery

Solution 1:^[1]

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

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pete
Solution 2	Rory McCrossan

'jQuery check all checkboxes in table

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]