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>
DISPLAY
One
Two
Three
Four
Five


SelectAll

29 comments :

  1. thank u very much .. this code is working fine

    ReplyDelete
  2. Thanks to all for appreciation.

    ReplyDelete
    Replies
    1. plz send me jquery ebook
      email id is
      alinaumanlai@gmail.com

      Delete
  3. 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");
    }

    ReplyDelete
  4. 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.

    ReplyDelete
  5. Its really helpful to me. Thank you.

    ReplyDelete
  6. You are the Man! It works perfectly... thanks for posting! This it was very helpful and saved me time.

    ReplyDelete
  7. This article helped me to solve my problem. Thanks for posting.

    ReplyDelete
  8. very nice and its helpful for me thank you very much.

    ReplyDelete
  9. how to get output in checkbox value in textbox

    ReplyDelete
  10. 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

    ReplyDelete
  11. Hi super ... It was very helpful for me

    ReplyDelete
  12. 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?//

    ReplyDelete
  13. Hi,
    Please send your email,so that i can send e-book

    Nirbhay Singh
    Email: nirbhay.ni@gmail.com

    ReplyDelete
  14. please also send me e-book
    Name vikas rana
    Email ranafromharyana96@gmail.com

    ReplyDelete
    Replies
    1. Hi Vikas,
      I have send you e-book of jQuery.

      Delete
    2. Please,can you send me also e-book of jQuery.
      Email : karbout@gmail.com

      Delete
  15. how we delete this selected ITEM

    ReplyDelete
    Replies
    1. Do you want to remove html of selected checkbox?

      Delete
  16. 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 ?

    ReplyDelete
  17. Thanks Bro............For This Code

    ReplyDelete
  18. Super ji.. its working fine..

    ReplyDelete
  19. Please,can you send me also e-book of jQuery.
    Mail id - mailtorameshmano@gmail.com

    ReplyDelete
  20. how can i select only two checkboxes with single click

    ReplyDelete
    Replies
    1. hey could you please explain your question little bit more?

      Delete
  21. Thanks for sharing this code, its working properly as i want... Thanks again.....

    ReplyDelete
  22. Thats Great.
    please send me jquery e-book on meetniked@gmail.com

    ReplyDelete