How to Check a Checkbox with jQuery?

Last Updated : 20 Nov, 2024

We can directly select the element by it's selector and then we can use checked property on that for check and unchecked.

1. By using Checked Property

In this method, we will select the element using the element selector and directly use the checked property on the item that is present at the passed index of the selected elements, and set its value to true.

Syntax

$('element_selector')[index].checked = true;

Example: The below example will explain the use of the checked property to check the checkbox using jQuery.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
</head>

<body>
    <p>
        <input type="checkbox" class="checkboxes">
        Front-End

        <input type="checkbox" class="checkboxes">
        Back-End
    </p>

    <p>
        <button type="button" class="check-front">
            Subscribe Front-End
        </button>

        <button type="button" class="check-back">
            Subscribe Back-End
        </button>

        <button type="button" class="reset">
            Reset
        </button>
    </p>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".check-front").click(function () {
                $(".checkboxes")[0].checked = true;
            });
            $(".check-back").click(function () {
                $(".checkboxes")[1].checked = true;
            });
            $(".reset").click(function () {
                $(".checkboxes")[0].checked = false;
                $(".checkboxes")[1].checked = false;
            });
        }); 
    </script>
</body>

</html>

Output:

2. Using prop() Method

The input can be accessed and its property can be set by using the prop() method. This method manipulates the ‘checked’ property and sets it to true or false depending on whether we want to check or uncheck it.

Syntax

$("element").prop("checked", true)

Example: The below example uses the prop() method of jQuery to check the checbox.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
        "https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
</head>

<body>
    <p>
        <input type="checkbox" name="option" id="front">
        Front-End

        <input type="checkbox" name="option" id="back">
        Back-End
    </p>

    <p>
        <button type="button" class="check-front">
            Subscribe Front-End
        </button>

        <button type="button" class="check-back">
            Subscribe Back-End
        </button>

        <button type="button" class="reset">
            Reset
        </button>
    </p>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".check-front").click(function () {
                $("#front").prop("checked", true);
            });
            $(".check-back").click(function () {
                $("#back").prop("checked", true);
            });
            $(".reset").click(function () {
                $("#front").prop("checked", false);
                $("#back").prop("checked", false);
            });

        }); 
    </script>
</body>

</html>

Output

3. Using attr() Method

It is similar to the above method and more suitable for older jQuery versions. The input can be accessed and its property can be set by using the attr() method. We have to manipulate the ‘checked’ attribute and set it to true or false depending on whether we want to check or uncheck it.

Syntax

$("element").attr("checked", true)

Example: The below code example implements the attr() method to check the checkbox.