Answers by Sentry

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');

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.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,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
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

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

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.