Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select all checkboxes with jQuery?

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?

like image 593
Darmen Amanbayev Avatar asked Feb 09 '10 10:02

Darmen Amanbayev


People also ask

How do I select all checkboxes with one checkbox?

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 do I select all checkbox inputs?

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.


2 Answers

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>
like image 190
Tatu Ulmanen Avatar answered Sep 24 '22 13:09

Tatu Ulmanen


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>
like image 34
LOL Avatar answered Sep 22 '22 13:09

LOL