Tengo una tabla con una casilla de verificación en el encabezado de la tabla que quiero usar para marcar/desmarcar todas las casillas de mi tabla. Este es mi código, pero no funciona.
$(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>Para hacer lo que necesita, puede usar los métodos closest() y find() para encontrar las casillas de verificación en el tbody de la tabla relacionadas con la casilla de verificación 'Todos'. Luego puede usar prop() para establecer su estado checked para que coincida. De manera similar, puede proporcionar un booleano a toggleClass() para agregar o eliminar la clase en función de si se marcó o no 'Todos'.
$(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>si pasa su evento a la función de cambio, puede usar el objetivo actual marcado para configurar su accesorio marcado en sus otras casillas de verificación:
$(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>