Get selected checkbox value using jquery

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>

28 comments :

Unknown28 March 2014 at 00:10
thank u very much .. this code is working fine
Dinesh Bhimani16 July 2014 at 02:37
me too ...
Nirbhay Singh16 July 2014 at 02:39
Thanks to all for appreciation.
Anonymous27 July 2014 at 12:33
Thank you very much. Its working fine other than a very small bug.
Bug:
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");
}
Nirbhay Singh27 July 2014 at 21:47
Hi dear,
This is not a bug, it is a requirement, however I fulfill your requirement in this article.
Thanks for your review and comment.
Anonymous21 October 2014 at 03:55
Its really helpful to me. Thank you.
Anonymous18 November 2014 at 09:16
You are the Man! It works perfectly... thanks for posting! This it was very helpful and saved me time.
Anonymous20 November 2014 at 23:10
This article helped me to solve my problem. Thanks for posting.
Anonymous9 December 2014 at 01:29
very nice and its helpful for me thank you very much.
nandha18 December 2014 at 20:43
how to get output in checkbox value in textbox
Nirbhay Singh18 December 2014 at 21:25
Hi nandha,
Exactly 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
Anonymous23 December 2014 at 02:59
Hi super ... It was very helpful for me
Anonymous17 January 2015 at 04:04
hey bro nice refece u given/but can u plz tell whch is the best book to jquery whch contains scripts+exmples+explaination for beginner?//
Nirbhay Singh17 January 2015 at 05:07
Hi,
Please send your email,so that i can send e-book

Nirbhay Singh
Email: nirbhay.ni@gmail.com
vikas rana21 January 2015 at 19:14
please also send me e-book
Name vikas rana
Email ranafromharyana96@gmail.com
Unknown23 March 2015 at 21:57
how we delete this selected ITEM
Anonymous20 April 2015 at 03:51
this code is working fine for single page
while applying this in pagination the values of array become null while moving to next page.
How this issue can solved ?
Suraj Dighodkar18 May 2015 at 04:12
Thanks Bro............For This Code
Anonymous24 January 2016 at 20:58
Super ji.. its working fine..
Anonymous24 January 2016 at 20:59
Please,can you send me also e-book of jQuery.
Mail id - mailtorameshmano@gmail.com
Anonymous7 February 2016 at 21:28
how can i select only two checkboxes with single click
Unknown18 July 2016 at 05:03
Thanks for sharing this code, its working properly as i want... Thanks again.....
Anonymous1 March 2017 at 04:03
Thats Great.
please send me jquery e-book on meetniked@gmail.com

Pages

Get selected checkbox value using jquery

Select all CheckBox on single click

28 comments :