You can easily get all selected checkbox value in jQuery. Simply use a each loop for all selected checkbox and every time add selected checkbox value in a variable.
var chkId = '';
$('.chkNumber:checked').each(function() {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0,-1);// Remove last comma
Select all CheckBox on single click
You can also check or uncheck all checkbox at single click. It is one line code, in below example you check SelectAll checkbox then all checkbox will check.$('.chkNumber').prop('checked', true);
CODE
<!DOCTYPE html> <html> <head> <title>jQuery With Example</title> <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('.btnGetAll').click(function () { if ($('.chkNumber:checked').length) { var chkId = ''; $('.chkNumber:checked').each(function () { chkId += $(this).val() + ","; }); chkId = chkId.slice(0, -1); alert(chkId); } else { alert('Nothing Selected'); } }); $('.chkSelectAll').click(function () { $('.chkNumber').prop('checked', $(this).is(':checked')); }); $('.chkNumber').click(function () { if ($('.chkNumber:checked').length == $('.chkNumber').length) { $('.chkSelectAll').prop('checked', true); } else { $('.chkSelectAll').prop('checked', false); } }); }); </script> </head> <body> <div> <input type="checkbox" class="chkNumber" value="1" />One<br /> <input type="checkbox" class="chkNumber" value="2" />Two<br /> <input type="checkbox" class="chkNumber" value="3" />Three<br /> <input type="checkbox" class="chkNumber" value="4" />Four<br /> <input type="checkbox" class="chkNumber" value="5" />Five<br /><br /> </div> <button type="button" class="btnGetAll">Get Selected Value</button><br> <input type="checkbox" class="chkSelectAll" />SelectAll </body> </html>
DISPLAY
One
Two
Three
Four
Five
Two
Three
Four
Five
SelectAll
thank u very much .. this code is working fine
ReplyDeleteme too ...
ReplyDeleteThanks to all for appreciation.
ReplyDeleteplz send me jquery ebook
Deleteemail id is
alinaumanlai@gmail.com
Thank you very much. Its working fine other than a very small bug.
ReplyDeleteBug:
First you select the "Select All" checkbox, then uncheck some checkboxes from the list, the Select All button will remains checked. I think you can add something like this:
var legchecked = $('input[class^=chkNumber]:checked=false').length;
if (legchecked)
{
alert("nothing selected");
}
Hi dear,
ReplyDeleteThis is not a bug, it is a requirement, however I fulfill your requirement in this article.
Thanks for your review and comment.
Its really helpful to me. Thank you.
ReplyDeleteYou are the Man! It works perfectly... thanks for posting! This it was very helpful and saved me time.
ReplyDeleteThis article helped me to solve my problem. Thanks for posting.
ReplyDeletevery nice and its helpful for me thank you very much.
ReplyDeletehow to get output in checkbox value in textbox
ReplyDeleteHi nandha,
ReplyDeleteExactly I am not able to understand your problem. May you write in detail please.
Regards
Nirbhay Singh
Email: nirbhay.ni@gmail.com
Mob: +91 9015583455
Hi super ... It was very helpful for me
ReplyDeletehey bro nice refece u given/but can u plz tell whch is the best book to jquery whch contains scripts+exmples+explaination for beginner?//
ReplyDeleteHi,
ReplyDeletePlease send your email,so that i can send e-book
Nirbhay Singh
Email: nirbhay.ni@gmail.com
please also send me e-book
ReplyDeleteName vikas rana
Email ranafromharyana96@gmail.com
Hi Vikas,
DeleteI have send you e-book of jQuery.
Please,can you send me also e-book of jQuery.
DeleteEmail : karbout@gmail.com
how we delete this selected ITEM
ReplyDeleteDo you want to remove html of selected checkbox?
Deletethis code is working fine for single page
ReplyDeletewhile applying this in pagination the values of array become null while moving to next page.
How this issue can solved ?
Thanks Bro............For This Code
ReplyDeleteSuper ji.. its working fine..
ReplyDeletePlease,can you send me also e-book of jQuery.
ReplyDeleteMail id - mailtorameshmano@gmail.com
how can i select only two checkboxes with single click
ReplyDeletehey could you please explain your question little bit more?
DeleteThanks for sharing this code, its working properly as i want... Thanks again.....
ReplyDeleteThats Great.
ReplyDeleteplease send me jquery e-book on meetniked@gmail.com