• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

34
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

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>

about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.