You want to check a checkbox using jQuery. You may want to do this so that you can check or uncheck multiple checkboxes at once. How do you do this?
You can use the jQuery prop()
method to get a checkbox value or to set one or more checkbox values. For example, you have a form where a user can select whether they want certain food items in an order, such as fries, and a button that checks the corresponding checkbox. Using jQuery, you can get the element, attach a “click” event listener to it, and then check the checkbox using the prop()
method:
const checkFriesBtn = $('#checkFriesBtn'); const friesCheckbox = $('#friesCheckbox'); checkFriesBtn.click(() => { friesCheckbox.prop('checked', true); });
This sets the "checked"
property of the checkbox to true
.
To check a checkbox using vanilla JavaScript, get the element using one of the vanilla JavaScript methods that return an Element
object, such as getElementById()
. Then set the element’s "checked"
property to true
:
document.getElementById('friesInput').checked = true;
You can also pass in a function as an argument to the jQuery prop()
method to set the value of the property or multiple properties. This is particularly useful for setting multiple properties as in the code example below, which toggles the value of all checkboxes on a page:
const checkAllBtn = $('#checkAllBtn'); const allCheckboxes = $("input[type='checkbox']"); checkAllBtn.click(() => { allCheckboxes.prop('checked', (i, val) => !val); });
The function argument of the prop()
method toggles all of the checkboxes. You can also uncheck all the checkboxes by returning false
or check all the checkboxes by returning true
.
The above code example can be written using vanilla JavaScript:
const checkAllBtnVanillaJS = document.getElementById('checkAllBtnVanillaJS'); const allCheckboxesVanillaJS = document.querySelectorAll( "input[type='checkbox']" ); checkAllBtnVanillaJS.addEventListener('click', () => { allCheckboxesVanillaJS.forEach( (checkbox) => (checkbox.checked = !checkbox.checked) ); });
In this example, a forEach
loop is used to loop through each checkbox and toggle its value.