Setting "checked" for a checkbox with jQuery

Matthew C.

The Problem

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?

The Solution

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'); => { 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']"); => { 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.

Join the discussionCome work with us
Share on Twitter
Bookmark this page
Ask a questionImprove this Answer

Related Answers

A better experience for your users. An easier life for your developers.

© 2023 • Sentry is a registered Trademark
of Functional Software, Inc.