jQuery check all checkboxes in table

Question

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>

Answer 1

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>

Answer 2

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>