jQuery Set Checkbox Checked

Let's see how can we set the checkboxes as checked when needed using jQuery?
Submitted by Pratishtha Saxena, on November 21, 2022

Checkboxes can be created using the input tag of HTML elements. Input tag accepts the 'type' attribute where different types can be specified, like – radio, checkbox, text, number, email, etc. Hence by setting the 'type' attribute as 'checkbox' we can create a checkbox field in our document.

Now, let's see how can we set these checkboxes as 'checked' on clicking the button. In order to do this, we'll use the .prop() method of jQuery.

The prop() method in jQuery helps to set or return the property of the selected element. When the property has to be returned, then the name of the property (attribute) is defined and it will return the value of the matched property value of the element. When the property has to be set, then along with the property name, property value is also to be given.

Syntax:

$('selector').prop('propertyName');
$('selector').prop('propertyName','value');

This method sets the attribute of all the matched elements and returns the property value of the first matched element. We can also define a custom function as its event handler which will get fired once the prop() method is triggered.

We will set the propertyName:checked and its value:true to set the specific checkboxes checked. The following example checks the weekend days when the given button is clicked.

jQuery code to set checkbox checked

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Set Checkbox Checked</h2>
    <p>Click the button to set that particular checkboxes as checked.</p>
    <button>Check the Weekends</button>
    <hr>
    Days:<br><br>
    <input type="checkbox" id="1">Monday<br>
    <input type="checkbox" id="2">Tuesday<br>
    <input type="checkbox" id="3">Wednesday<br>
    <input type="checkbox" id="4">Thursday<br>
    <input type="checkbox" id="5">Friday<br>
    <input type="checkbox" id="6">Saturday<br>
    <input type="checkbox" id="7">Sunday<br>
    <hr>
    <h3 id="h3"></h3>
  </body>
  
  <script type="text/javascript">
      $(document).ready(function () {
          $('button').click(function () {
              $('#6').prop('checked', true);
              $('#7').prop('checked', true);
              $('#h3').html('Weekends Checked');
          });
      });
  </script>
</html>

Output: