Check if at least one checkbox is checked using jQuery

Question

I have five checkboxes. Using jQuery, how do I check if at least one of them is checked?

<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">
<br />
<input type="checkbox" name="service[]">

Answer 1

is() can do this, and is arguably the only acceptable use of is(":checked"):

From the jQuery docs, http://api.jquery.com/is/:

Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

alert($("input[name='service[]']").is(":checked"));

Example: http://jsfiddle.net/AndyE/bytVX/1/ (based on the fiddle by Brandon Gano)

Alternatively, and potentially faster, you can pass a function to is():

$("input[name='service[]']").is(function () {
    return this.checked;
});

Answer 2

This should do the trick:

function isOneChecked() {
    return ($('[name="service[]"]:checked').length > 0);
}

Answer 3

Edit: The original solution in this answer is inefficient and should not be used. Please see the revised solution based on comments and examples from other answers to this question.

The original (bad) solution follows:

// DO NOT USE; SEE BELOW
$('button').click(function () {
  var atLeastOneIsChecked = false;
  $('input:checkbox').each(function () {
    if ($(this).is(':checked')) {
      atLeastOneIsChecked = true;
      // Stop .each from processing any more items
      return false;
    }
  });
  // Do something with atLeastOneIsChecked
});

The use of .each() is redundant in this example, as .is() can be used directly on the set of objects rather than manually iterating through each one. A more efficient solution follows:

$('button').click(function () {
  var atLeastOneIsChecked = $('input:checkbox').is(':checked');
  // Do something with atLeastOneIsChecked
});

Note that one of the comments indicates a strong dislike for $(this).is(':checked'). To clarify, there is nothing wrong with is(':checked') in cases where you are testing a set of objects. That said, calling is(':checked') on a single item is much less efficient than calling .checked on the same item. It also involves an unnecessary call to the $ function.

Answer 4

Another answer:

!!$("[type=checkbox]:checked").length

or

!!$("[name=service[]]:checked").length

It depends on what you want.

Answer 5

You should try like this....

var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");

checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));

});

Answer 6

you need to check if checkbox is checked or not.

$("#select_all").click(function(){
           var checkboxes = $("input[type='checkbox']");
           if(checkboxes.is(":checked"))
               alert("checked");
           else
               alert("select at least one;      

            });

Answer 7

The square bracket [] is not necessary:

var atLeastOneIsChecked = $("input[name='service']:checked").length > 0;

The same goes to your HTML, but better to have an id to uniquely identify each of the checkboxes:

<input id="chk1" type="checkbox" name="service">
<br />
<input id="chk2" type="checkbox" name="service">
<br />
<input id="chk3" type="checkbox" name="service">
<br />
<input id="chk4" type="checkbox" name="service">
<br />
<input id="chk5" type="checkbox" name="service">

Answer 8

var atLeastOneIsChecked = $('input[name="service[]"]:checked').length > 0;

Answer 9

var checkboxes = document.getElementsByName("service[]");
if ([].some.call(checkboxes, function () { return this.checked; })) {
  // code
}

What you want is simple, get all the elements with the name, then run some code if some of those elements are checked.

No need for jQuery.

You may need an ES5 shim for legacy browsers though

Answer 10

You can do the following way. Initially set a variable, lets say checked as false. Then set it to true if the following condition met. Use an if statement to check the variable. Take note: Here submit is the id of the button, main is the id of the form.

$("#submit").click(function() {
  var checked = false;
  if (jQuery('#main input[type=checkbox]:checked').length) {
    checked = true;
  }
  if (!checked) {
    //Do something
  }
});