How to Check/Select a Checkbox with jQuery - JavaScript

In this short guide, you'll learn how to select checkbox elements on the page, and check them in JavaScript, with Vanilla JavaScript and jQuery.

We'll be working with this simple checkbox setup:

<h1>Check/Select Checkbox</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore">
<label for="takenBefore">Yes</label>

<button id="button"> Check Checkbox </button>

element.checked = true

The absolute simplest way to check or select a checkbox is to explicitly set the checked field to true:

// Get Element
checkBox = document.getElementById('takenBefore');
// Set the `checked` field to `true`
checkBox.checked = true

To demonstrate this, let's attach an event listener to a button, which then programmatically selects/checks the Checkbox for us. This is a benign example, but it does serve the point - you'll be checking/selecting the checkbox based on some action from the user:

document.getElementById('button').addEventListener('click', event => {
    checkBox = document.getElementById('takenBefore');
    checkBox.checked = true
});

This results in:

$('#element')[0].checked = true

Note: jQuery is a popular JavaScript library, present in many projects around the world. Due to its light weight and features that expand the scope of JavaScript's built-in capabilities - it's become a staple.

We can use jQuery's selector syntax instead of pure JavaScript's to simplify both the selection of the element and the event listener attached to other elements that lead to the checkbox being selected. If you already have jQuery in your project, it'll net simpler code in the end, though, if this is all you need to do, it's probably not worth importing the library just for this.

You can import jQuery in your page via a Content Delivery Network (CDN). You can use jQuery's own CDN for importing the library as well.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
</script>

Now, with jQuery installed - you can easily just set the checked property to true as before, but with simpler syntax:

$('#takenBefore')[0].checked = true

Here, we get a jQuery object, not the underlying element with the selector, hence, we'll have to subscript it and get the underlying object to access the checked property with [0].

In much the same way, if we want to trigger this code based on some other action, such as a button press:

$('#button').on('click', function() {
    $('#takenBefore')[0].checked = true
});

This syntax is fairly simpler than the one we've used before, though, it's functionally equivalent:

The downside of this approach is - it's raw. We just utilized the simpler selection syntax, but ultimately just explicitly set the property to true after that. There's another way to set the property, but more implicitly.

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

The prop() function accepts a key-value set of arguments - the name of the property we'd like to access and the value we'd like to assign to it. The method itself performs validation that isn't performed when we explicitly set the property to true like before.

Generally speaking, if you're already using jQuery, it's advised to use prop() rather than explicitly setting the property, due to the added benefit of validation.

That being said, setting the checkbox to be checked/selected is as easy as:

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

And again, since it's typically triggered on some other event:

$('#button').on('click', function() {
    $('#takenBefore').prop('checked', true);
});

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

In older versions of jQuery, which you might be forced to use due to project constraints, the prop() function was preceded by the attr() function, which set the attributes of elements.

In this context, it works in much the same way as prop():

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

And again, since it's typically triggered on some other event:

$('#button').on('click', function() {
    $('#takenBefore').attr('checked', true);
});

Conclusion

In this short guide, we've taken a look at how to set a checkbox to "checked"/selected using Vanilla JavaScript and jQuery.

We've taken a look at the simplest methods such as explicitly setting the property and worked our way up to using jQuery's wrapper methods with validation.