How to select all checkboxes with jQuery?

by

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>

More Related Contents:

  1. How to get nth-child selector to skip hidden divs [duplicate]
  2. jQuery vs document.querySelectorAll
  3. Possible to associate label with checkbox without using “for=id”?
  4. Fade animation while scrolling
  5. Get the longest text in HTML document using Jquery or javascript
  6. jQuery SVG, why can’t I addClass?
  7. Setting background-image using jQuery CSS property
  8. How to generate a simple popup using jQuery
  9. How to get a style attribute from a CSS class by javascript/jQuery?
  10. How to get the background color code of an element in hex?
  11. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  12. Testing if a checkbox is checked with jQuery
  13. jQuery: Get selected element tag name
  14. How to use jQuery and jQuery plugins with PrimeFaces
  15. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  16. width/height after transform
  17. Save a pre element as PDF with CSS
  18. Get CSS path from Dom element
  19. jQuery event that triggers after CSS is loaded?
  20. Center flex item in container, when surrounded by other flex items
  21. Change the style of :before and :after pseudo-elements? [duplicate]
  22. collapse and expand tabs jquery / simple accordion
  23. How to use Javascript to check and load CSS if not loaded?
  24. Remove scrollbar but not scrolling functionality [duplicate]
  25. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  26. fade effect using javascript no jquery?
  27. Wrapping lists into columns
  28. How to stop user from printing webpages? using javascript or jquery
  29. How should I crop an image at client side using jcrop and upload it?
  30. Removing element with jQuery?

Leave a Comment