How to select all checkboxes with jQuery?
183,106
Solution 1
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>
Solution 2
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>
Solution 3
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);
}
});
});
Solution 4
$("form input[type='checkbox']").attr( "checked" , true );
or you can use the
$("form input:checkbox").attr( "checked" , true );
I have rewritten your HTML and provided a click handler for the main checkbox
$(function(){
$("#select_all").click( function() {
$("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
});
});
<form id="frm1">
<table>
<tr>
<td>
<input type="checkbox" id="select_all" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
</table>
</form>
Solution 5
$(function() {
$('#select_all').click(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
});
Author by
Darmen Amanbay
Updated on July 05, 2022Comments
-
Darmen Amanbay almost 2 years
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? -
Thiago Belem over 14 yearsJust beware to don't check every checkbox on the page... :)
-
Tatu Ulmanen over 14 yearsActually, the correct syntax is
.attr("checked", "checked")
. -
Darmen Amanbay over 14 years+1 Thanks rahul, but I needed to find all checkboxes when user clicks on #select_all checkbox.
-
Felix almost 11 yearsFor me this only worked the first time (ie, check all, uncheck all). On the second 'check all' none of the other checkboxes were checked. I used
checkboxes.prop('checked', true);
andcheckboxes.prop('checked', false);
instead, from this answer. Oops, just realised this is mentioned in answers further down the page... -
Aleksander Lidtke over 10 yearsAdd some explanation/commentary
-
earthmover about 10 yearsthis may also done like this...
$(':checkbox').prop('checked', this.checked);
-
Big Rich almost 10 yearsThanks for this, I used your implementation with JQuery 1.8.3 ;-)
-
Big Rich almost 10 yearsSubtle - set the checked status of the retrieved checkboxes equal to that of our recently modified 'master' checkbox - simple, elegant and surprisingly logical when you think about it - Thanks!
-
Rory McCrossan over 8 yearsCode is great, but some explanation of why any how it helps is always welcome.
-
Todd over 8 yearsjQuery documentation states that
$( "[type=checkbox]" )
is faster for modern browsers (faster than$(':checkbox')
). -
Erenor Paz over 7 yearsThe OP modified the answer to cope with "recent" changes :)
-
Maximilian Peters about 6 yearsThank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made.