Can I use jQuery to check whether at least one checkbox is checked?

Question

I have the following HTML form which can have many checkboxes. When the submit button is clicked, I want the user to get a javascript alert to check at least one checkbox if none are checked. Is there an easy way to do this using jQuery?

<form name = "frmTest" id="frmTest">
  <input type="checkbox" value="true" checked="true" name="chk[120]">
  <input type="checkbox" value="true" checked="true" name="chk[128]">
  <input type="checkbox" name="chk[130]">
  <input type="checkbox" name="chk[143]">
  <input type="submit" name="btnsubmit" value="Submit">
</form>

You would probably be better off with <input name="chk[]" value="120">. Note also that the only acceptable value for the checked attribute is "checked". checked="true" is an error. — Quentin
– Quentin, Commented Apr 21, 2010 at 16:22

Quentin · Accepted Answer · 2025-09-16 07:59:14Z

112

Use the :checked pseudo-class to get a list of the checkboxes which are checked, then test the length of the list. Anything other than zero will be a true value.

if(jQuery('#frmTest input[type=checkbox]:checked').length) { … }

You can skip involving jQuery if you like:

document.getElementById('frmTest').addEventListener('submit', (e) => {
  e.preventDefault();
  if (document.querySelectorAll('#frmTest input[type=checkbox]:checked').length) {
    alert("At least one checkbox is checked");
  } else {
    alert("No checkboxes are checked");
  }
});

<form id="frmTest">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox" checked>
  <input type="checkbox">
  <button>Show result</button>
</form>

edited Sep 16 at 7:59

answered Apr 21, 2010 at 15:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew Flaschen · Accepted Answer · 2010-09-15 17:23:30Z

37

$('#frmTest input:checked').length > 0

edited Sep 15, 2010 at 17:23

answered Apr 21, 2010 at 15:50

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

3 Comments

Kasturi Over a year ago

$('#frmTest:checkbox').length > 0 would be better to check among a certain number of checkboxes.

David Thomas Over a year ago

Why would radio-buttons be better? If the OP wants at least one option selected radio-buttons would limit him to one at most.

Matthew Flaschen Over a year ago

@David, I've removed that suggestion.

Jon · Accepted Answer · 2010-04-21 15:51:10Z

27

$("#frmTest").submit(function(){
    var checked = $("#frmText input:checked").length > 0;
    if (!checked){
        alert("Please check at least one checkbox");
        return false;
    }
});

answered Apr 21, 2010 at 15:51

Jon

6,08610 gold badges41 silver badges41 bronze badges

Comments

chithon · Accepted Answer · 2013-05-08 08:31:32Z

9

$("#show").click(function() {
    var count_checked = $("[name='chk[]']:checked").length; // count the checked rows
        if(count_checked == 0) 
        {
            alert("Please select any record to delete.");
            return false;
        }
        if(count_checked == 1) {
            alert("Record Selected:"+count_checked);

        } else {
            alert("Record Selected:"+count_checked);
          }
});

answered May 8, 2013 at 8:31

chithon

1931 gold badge6 silver badges15 bronze badges

1 Comment

yenren Over a year ago

Doesn't work for me, something changed in how jQuery handles checkbox checked event?

Al.G. · Accepted Answer · 2017-09-29 15:42:39Z

9

$('#fm_submit').submit(function(e){
    e.preventDefault();
    var ck_box = $('input[type="checkbox"]:checked').length;
    
    // return in firefox or chrome console 
    // the number of checkbox checked
    console.log(ck_box); 

    if(ck_box > 0){
      alert(ck_box);
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name = "frmTest[]" id="fm_submit">
  <input type="checkbox" value="true" checked="true" >
  <input type="checkbox" value="true" checked="true" >
  <input type="checkbox" >
  <input type="checkbox" >
  <input type="submit" id="fm_submit" name="fm_submit" value="Submit">
</form>
<div class="container"></div>

edited Sep 29, 2017 at 15:42

Al.G.

4,4476 gold badges34 silver badges63 bronze badges

answered Apr 10, 2017 at 20:53

Domingo

1731 silver badge5 bronze badges

Comments

neveraskedforthis · Accepted Answer · 2010-09-15 16:34:46Z

6

$('#frmTest').submit(function(){
    if(!$('#frmTest input[type="checkbox"]').is(':checked')){
      alert("Please check at least one.");
      return false;
    }
});

is(':checked') will return true if at least one or more of the checkboxes are checked.

answered Sep 15, 2010 at 16:34

neveraskedforthis

6448 silver badges14 bronze badges

2 Comments

Robert Over a year ago

Is it possible for this to check on live checkbox clicks?

neveraskedforthis Over a year ago

Yes, but you would use a different event handler. See this: stackoverflow.com/questions/3442322/…

Collectives™ on Stack Overflow

Can I use jQuery to check whether at least one checkbox is checked?

6 Answers 6

Comments

3 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related