Sentry Answers>JavaScript>

Setting "checked" for a checkbox with jQuery

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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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.

  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.