How do I select all check box when I click on Select button using jQuery
Question
I have HTML page which have multiple check boxes and individually they can be checked. I have button select , so what I am suppose to do is. When I click on select all the check boxes should get selected, and deselected.
Html
<html> <head> <script src="jquery.js"></script> </head> <body> <script> $(document).ready(function() { $('#selectAll').click(function(event) { //on click if(this.checked) { // check select status $('.btn-chk').each(function() { //loop through each checkbox this.checked = true; //select all checkboxes with class "checkbox1" }); }else{ $('.btn-chk').each(function() { //loop through each checkbox this.checked = false; //deselect all checkboxes with class "checkbox1" }); } }); }); </script> <table id="example" cellspacing="0" width="20%"> <thead> <tr> <th><button type="button" id="selectAll" class="myClass">Select</button></th> <th>number</th> <th>company</th> <th> Type</th> <th> Address</th> <th>Code</th> </tr> </thead> <tbody> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>1</td> <td>APPLE</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>2</td> <td>DELL</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>3</td> <td>Amazon</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> <tr> <td><span class="button-checkbox"> <button type="button" class="btn-chk" data-color="success"></button> <input type="checkbox" class="hidden" /> </span> </td> <td>4</td> <td>Microsoft</td> <td>IT</td> <td>San Jones</td> <td>US</td> </tr> </tbody> </body> </html>
Output
In the image I have select button. what I want is when I click on select button all the check boxes should get selected
9 answers
solution1
2 2015-04-23 12:49:39
If you want to toggle the checkbox state, you can do like this
var chkd = true;
$('#selectAll').click(function(event) {
$(":checkbox").prop("checked", chkd);
chkd = !chkd;
});
solution2
1 ACCPTED 2015-04-23 12:49:52
#selectAll is a button, it doesn't have a checked property, but one could emulate that with a data attribute instead.
Secondly, .btn-chk isn't a checkbox either, so it can't be checked, you have to target the checkboxes
$(document).ready(function() {
$('#selectAll').click(function(event) {
var checked = !$(this).data('checked');
$('.btn-chk').next().prop('checked', checked);
$(this).data('checked', checked);
});
});
solution3
1 2015-04-23 12:58:07
An simple way is like below:
$(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
solution4
1 2015-04-23 13:02:31
Check this jsFiddle
$(document).ready(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
You can simply use it For more info on jQuery visit w3schools-jquery
solution5
0 2015-04-23 12:56:20
Try this-
var checked = true;
$('#selectAll').click(function(event) {
$('table tr').each(function( index ) {
$(this).find('input[type="checkbox"]').prop(checked, true);
});
checked = !checked;
});
solution6
0 2015-04-23 12:58:50
Change your jQuery code to
$('#selectAll').click(function(event) { //on click
if($('.hidden').prop('checked') == false) { // check select status
$('.hidden').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.hidden').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
This will toggle between checked and unchecked of the checkboxes when you click the button .
solution7
0 2015-04-23 13:05:23
inside the "click" function "this" is button and not a checkbox. and button property checked is underfined. "$('.btn-chk').each" - is loop on each element with class ".btn-chk", in your HTML is buttons and not an checkboxes.
in your context the "#selectAll" must be a checkbox and put class '.btn-chk' on your checkboxes
solution8
0 2015-04-23 13:14:37
You can do it like this also with ':checkbox' selector.
$(document).ready(function () {
$('#selectAll').on('click', function () {
$(':checkbox').each(function () {
$(this).click();
});
});
});
solution9
0 2017-01-26 09:36:11
This will definitely works.
$("#selectAll").click(function(){
var checked = !$(this).data('checked');
$('.btn-chk').prop('checked', checked);
$(this).data('checked', checked);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.