I need help with jQuery selectors. Say I have a markup as shown below:
<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>
How to get all checkboxes except #select_all
when user clicks on it?
In order to select all the checkboxes of a page, we need to create a selectAll () function through which we can select all the checkboxes together. In this section, not only we will learn to select all checkboxes, but we will also create another function that will deselect all the checked checkboxes.
How can I do this? In Firefox (and maybe others?) : Hit CTRL+SHIFT+K to open the console, then paste : $("input:checkbox"). attr('checked', true) and hit Enter . All check-boxes on current page should now be checked.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With