How to Set Checked For Checkbox in jQuery

jQuery is a popular JavaScript library used by many web developers for DOM manipulation and client-side processing. Often JavaScript developers need to work with form elements such as checkboxes. They need to check if checkbox is checked and set it if not the case. There are 3 simple ways to easily set checked for checkbox in jQuery. In this article, we will learn how to do this.

How to Set Checked For Checkbox in jQuery

Here are 3 different ways to programmatically check checkbox in jQuery.

1. Using Checked Property

jQuery provides checked property for all checkboxes. It can have true or false values – true means it is checked and false means it is unchecked. Here is its syntax.

$(element_selector).checked=true

Let us say you have the following 2 checkboxes.

<form action="/test.php">
  <input type="checkbox" id="apple" name="apple" value="apple" class="fruits">
  <label for="apple"> Apple</label><br>
  <input type="checkbox" id="banana" name="banana" value="banana" class="fruits">
  <label for="banana"> Banana</label><br>
</form>

If you want to check the checkbox with id=’apple’ then you can do this using the following code.

$('#apple').checked=true

In the above code, we use the ID attribute to uniquely select a single checkbox and set its checked property to true.

If your jQuery selector returns multiple items, then you will need to use an index to clearly identify the specific checkbox to check. Here’s an example to check the checkbox with id=’banana’.

$('.fruits')[1].checked=true

In the above code, the ‘.fruits’ selector returns all checkboxes with class=’fruits’. They are indexed 0, 1, … with the first checkbox having index=0. We want to check the second checkbox, with index=1. So we mention it in square brackets as [1] immediately after the jQuery selector.

In both the above cases, we check only a single checkbox. If you want, you can also check multiple checkboxes at one go. Just use a selector that returns multiple elements, as shown above, and set their checked property as true.

$('.fruits').checked=true

The above code both the checkboxes, with class=’fruits’, and also sets the checked property of each checkbox to true. This is useful if you have a large number of checkboxes and you want to check all of them at one go.

Another way to check multiple check boxes at one go, is to loop through each checkbox and individually set their checked property to true.

$('.fruits').each(function(){
  $(this).checked=true;
});

In the above case, you can individually control whether to set a checkbox or not, in each iteration, instead of setting all returned checkboxes. This is very useful if you have a large number of checkboxes that you want to check but not all of them.

You can also check if a checkbox is checked or not using this property.

if($('#apple').checked==true){
   alert('apple checkbox is checked');
}else{
   alert('apple checkbox is not checked');
}

2. Using Prop Method

jQuery also provides prop() function that allows you to set any property of one or more DOM elements. So you can use this function to set the checked property of your checkbox. Here is its syntax.

$('element_selector').prop('checked',true);

Let us say you have the following two checkboxes.

<form action="/test.php">
  <input type="checkbox" id="volvo" name="volvo" value="volvo" class="cars">
  <label for="volvo"> Volvo</label><br>
  <input type="checkbox" id="ford" name="ford" value="ford" class="cars">
  <label for="ford"> Ford</label><br>
</form>

If you want to set the checkbox with id=’volvo’ you can do so with the following code.

$('#volvo').prop('checked',true);

If the element selector you use returns multiple items, then you will need to use an index to set the right checkbox. Here is an example where we use the class name as selector, which returns multiple items. So we use index=1 to set checkbox with id=’ford’. The first returned item has index 0, the next item has index 1, and so on.

$('.cars')[1].prop('checked',true);

You can also set multiple checkbox at one go. You just need to call prop() function on it directly as shown below.

$('.cars').prop('checked',true);

In the above code, our jQuery selector returns all items with class=’cars’ and calls prop() function on each of them to set them.

If you want to control the individual items that are set using the prop() function, then you can loop through them and call prop() function on each item, or only those items that you want.

$('.cars').each(function(){
   $(this).prop('checked',true);
});

3. Using Attr Method

Similarly, you can also use attr() function, which gets/sets the attributes of one or more DOM items. Here is the syntax to set a checkbox.

$('element_selector').attr('checked',true);

Let us say you have the following two checkboxes.

<form action="/test.php">
  <input type="checkbox" id="apple" name="apple" value="apple" class="phone">
  <label for="apple"> Apple</label><br>
  <input type="checkbox" id="samsung" name="samsung" value="samsung" class="phone">
  <label for="samsung"> Samsung</label><br>
</form>

Here is an example to set checkbox with id=’apple’.

$('#apple').attr('checked',true);

If the jQuery selector returns multiple items, then you can use an index to pick the appropriate element. Here is an example where our selector class=’phone’ returns multiple items and we use index=0 to select phone with id=’apple’.

$('.phone')[0].attr('checked',true);

In the above code, the jQuery selector returns all items with class=’phone’ with index=0 for the first item, index=1 for second item and so on.

You can also set multiple checkboxes at one go as shown below. It returns all items with class=’phone’ and calls attr() function on them.

$('.phone').attr('checked',true);

If you want to selectively set multiple checkboxes, then you may want to run a loop through them and call attr() function on only required items. Here is an example to loop through all checkboxes and check only the one where id=’apple’.

$('.phone').each(function(){
  if($(this).attr('name')=='apple'){
       $(this).attr('checked',true);
     }
});

Conclusion

In this article, we have learnt several easy ways to set checked for checkbox in jQuery. The key is to use the right selector, and then you can use any of the above methods. They offer similar performance. We have learnt how to set a single checkbox, as well as multiple checkboxes in one statement. We have also learnt how to loop through the checkboxes if there are multiple of them and selectively check them, as per our requirement. You can call these functions and attributes from within another jQuery function or in an event handler such as button click.

Also read:

How to Include JavaScript File in Another JS File
How to Clone JavaScript Object
How to Detect Web Browser in JavaScript