Tag: webdev

1. Introduction

A frequent concern when using jQuery for web development is: how to check if a checkbox is checked? There are multiple ways of accomplishing this task which we illustrate with examples in this article.

2. Using the DOM property “checked”

A checkbox is of the type HTMLInputElement and has a property called “checked” whose value is “true” if it is checked.

In the following example, this refers to the checkbox DOM element whose property “checked” is being checked. The event handler is invoked after the element is clicked and the function outputs the current state of the checkbox:

$('#check').change(function(ev) {
   if ( this.checked ) console.log('checked');
   else console.log('not checked');
});

Since no jQuery specific features are being used in this example, you can also write this as follows (without using jQuery):

document.getElementById('check').addEventListener('change', function() {
   if ( this.checked ) console.log('checked');
   else console.log('not checked');
});

3. Using jQuery is(‘:checked’)

jQuery provides an .is(‘:checked’) method which can be used as follows:

$('#check').change(function(ev) {
    if ( $(this).is(':checked') ) console.log('checked');
    else console.log('not checked');
});

If multiple checkboxes match the jQuery selector, this method can be used to check if at least one is checked. Consider this HTML which sets up a bunch of checkboxes with the same class.

<label class="checkbox-inline">
<input id="checkboxRed" type="checkbox"
   class="colorCheck"
   value="red"> Red
</label>
<label class="checkbox-inline">
<input id="checkboxGreen" type="checkbox"
   class="colorCheck"
   value="green"> Green
</label>
<label class="checkbox-inline">
<input id="checkboxRed" type="checkbox"
   class="colorCheck"
   value="blue"> Blue
</label>

The following code prints true if at least one is checked:

$('.colorCheck').change(function(ev) {
    console.log('any checked? ' + $('.colorCheck').prop(':checked'));
});

4. Using jQuery .prop()

Another method of checking the state using jQuery is to use the .prop() method:

$('#check').change(function(ev) {
    if ( $(this).prop('checked') ) console.log('4. checked');
    else console.log('4. not checked');
});

Check if one or more checkboxes are checked using the same construct:

$('.colorCheck').change(function(ev) {
    console.log('any checked? ' + $('.colorCheck').prop('checked'));
});

5. Using jQuery “checked” Selector

In the case when you have multiple related checkboxes, you can get a list of the checked ones by doing:

var boxes = $('.colorCheck:checked');
boxes.each(function(i, chkbox) {
  // process each checked box here
});

// How many are checked
console.log('Checked #' + boxes.length);

Conclusion

In this article, we presented various ways of checking the status of a checkbox: whether using jQuery or without. Depending on circumstances, you may prefer one method over another.