Question

0

35

Views

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>

about 1 month ago ·

Juan Pablo Isaza

2 answers

Answer question

0

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>

about 1 month ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-06-30T02:49:35.672Z

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>