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

30 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
  23. Thus, operators are turning a blind eye to profit margins, sponsoring these free-bet and odds-boosting campaigns in what might be be} an ultimately futile effort to grab a portion of the multibillion-dollar cell playing market. Regardless of the event, Mr Green is the place for betting online. Offering essentially the most aggressive odds and the largest number of betting markets, you’ll additionally discover our revamped Sportsbook 2.0 providing players the most effective stay betting expertise online. It’s all on offer and positive to increase your enjoyment irrespective of the event. Betting on huge events is one approach to increase the joy and rush that 바카라사이트 comes from viewing stay events. The inflow of media protection, evaluation, and interest captivates audiences and fuels interactions and debates amongst fans and casuals alike.

    ReplyDelete