jQuery check all checkboxes in table

May 13, 2022

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>

>Solution :

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>