How To Set Checkbox Checked In Jquery

In this blog post, we will learn how to set a checkbox as checked using jQuery. The jQuery library provides a simple and efficient way to work with HTML elements, including checkboxes. The .prop() method can be used to set the checked property of a checkbox to true or false.

Using .prop() Method

First, let’s see an example of setting the checked property of a checkbox to true using the .prop() method:

    $(document).ready(function() {
        $('#myCheckbox').prop('checked', true);
    });
    

In this example, we have a checkbox with the ID “myCheckbox”. When the page is fully loaded, the jQuery code will set the checked property of this checkbox to true, making it checked.

Using .attr() Method

An alternative method to achieve the same result is the .attr() method. However, it’s important to note that using .prop() is recommended for boolean attributes like “checked”. The .attr() method should be used for non-boolean attributes.

Here’s an example of setting the checked property of a checkbox using the .attr() method:

    $(document).ready(function() {
        $('#myCheckbox').attr('checked', 'checked');
    });
    

Unchecking a Checkbox

To uncheck a checkbox, simply set the checked property to false using the .prop() method:

    $(document).ready(function() {
        $('#myCheckbox').prop('checked', false);
    });
    

Toggle the Checkbox State

Finally, you might want to toggle the state of a checkbox, meaning that if it’s checked, then uncheck it, and vice versa. You can achieve this by using the .click() method:

    $(document).ready(function() {
        $('#myCheckbox').click();
    });
    

In this example, the .click() method will simulate a click on the checkbox, which will toggle its checked state.

Conclusion

In this blog post, we have explored different ways to set the checked property of a checkbox using jQuery. The .prop() method is recommended for working with boolean attributes like “checked”. Other methods such as .attr() and .click() can also be used for specific use cases. Happy coding!