How to select all checkboxes with jQuery?
A more complete example that should work in your case:
$('#select_all').change(function() { var checkboxes = $(this).closest('form').find(':checkbox'); checkboxes.prop('checked', $(this).is(':checked'));});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form> <table> <tr> <td><input type="checkbox" id="select_all" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> </table></form>When the #select_all checkbox is clicked, the status of the checkbox is checked and all the checkboxes in the current form are set to the same status.
Note that you don't need to exclude the #select_all checkbox from the selection as that will have the same status as all the others. If you for some reason do need to exclude the #select_all, you can use this:
$('#select_all').change(function() { var checkboxes = $(this).closest('form').find(':checkbox').not($(this)); checkboxes.prop('checked', $(this).is(':checked'));});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form> <table> <tr> <td><input type="checkbox" id="select_all" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> </table></form>
Simple and clean:
$('#select_all').click(function() { var c = this.checked; $(':checkbox').prop('checked', c);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form> <table> <tr> <td><input type="checkbox" id="select_all" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> <tr> <td><input type="checkbox" name="select[]" /></td> </tr> </table></form>
Top answer will not work in Jquery 1.9+ because of attr() method. Use prop() instead:
$(function() { $('#select_all').change(function(){ var checkboxes = $(this).closest('form').find(':checkbox'); if($(this).prop('checked')) { checkboxes.prop('checked', true); } else { checkboxes.prop('checked', false); } });});