815

How can a checkbox be checked/unchecked using JavaScript?

1

13 Answers 13

1418

Javascript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);
6
  • 2
    Using .prop doesn't seem to work with Jquery 1.11.2 in Firefox with locally hosted files. .attr does. I've not tested more fully. Here's the code: ``` personContent.find("[data-name='" + pass.name + "']").children('input').attr('checked', true); ``` Mar 27, 2015 at 10:27
  • 3
    Should we rather use attr or prop ?
    – Black
    Aug 30, 2016 at 7:31
  • 64
    Apparently .checked = true/false doesn't trigger the change event :-\
    – user1636522
    Mar 1, 2019 at 9:13
  • fyi: just tested this onclick="document.getElementById('dmsmh_chk').checked = !document.getElementById('dmsmh_chk').checked;" this behaves like a jQuery toggle in plain JS. (checks the box when it is unchecked or removes the check when it is checked)
    – Bim
    Aug 31, 2021 at 16:11
  • doesn't work for me
    – Max
    May 1, 2022 at 15:03
216

Important behaviour that has not yet been mentioned:

Programmatically setting the checked attribute, does not fire the change event of the checkbox.

See for yourself in this fiddle:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle tested in Chrome 46, Firefox 41 and IE 11)

The click() method

Some day you might find yourself writing code, which relies on the event being fired. To make sure the event fires, call the click() method of the checkbox element, like this:

document.getElementById('checkbox').click();

However, this toggles the checked status of the checkbox, instead of specifically setting it to true or false. Remember that the change event should only fire, when the checked attribute actually changes.

It also applies to the jQuery way: setting the attribute using prop or attr, does not fire the change event.

Setting checked to a specific value

You could test the checked attribute, before calling the click() method. Example:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

Read more about the click method here:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

4
  • 16
    That's a good answer but personally I would prefer to fire the change event instead of calling the click() elm.dispatchEvent(new Event('change')); Feb 6, 2016 at 8:48
  • @VictorSharovatov Why would you prefer to fire the change event?
    – PeterCo
    Dec 5, 2016 at 11:28
  • 3
    I can agree only partially - many web browsers with AdBlocks are defending DOM from virtual clicking() due to unwanted actions from ads
    – pkolawa
    Sep 12, 2017 at 8:36
  • 6
    @PeterCo: Probably because it more-clearly portrays intent -- click the element to fire the change event versus dispatch a change event to fire a change event -- indirect (click triggers change) versus direct. The latter is considerably clearer and doesn't require the reader to know that a click fires a change.
    – Bill Dagg
    Mar 28, 2019 at 19:34
45

to check:

document.getElementById("id-of-checkbox").checked = true;

to uncheck:

document.getElementById("id-of-checkbox").checked = false;
1
  • 3
    That would only change the checked attribute. However, onclick and similar events will not be triggered. Jun 28, 2018 at 19:06
21

We can checked a particulate checkbox as,

$('id of the checkbox')[0].checked = true

and uncheck by ,

$('id of the checkbox')[0].checked = false
4
  • 1
    You really don't need the array index if you are only selecting one element. But I guess if you want to be explicit. haha
    – Rizowski
    Apr 22, 2015 at 18:46
  • 8
    @Rizowski You do need the index to get the native html element - jQuery objects don't have a "checked" property Sep 7, 2015 at 11:55
  • This has worked for me. Without the array index, I were getting undefined error. Thanks so much, saved my day.
    – Neri
    Apr 15, 2018 at 12:37
  • Works perfect! It is only working with [0] because the object does not have the property, so we need the index. No idea why this answer isn't the most upvoted answer...
    – rank
    Oct 21, 2021 at 14:43
18

Try This:

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');
1
  • Your answer has a limitation. When the checkbox is checked or unchecked at least once by the end user, i.e not programmatically, it stops working, the same checkbox can no longer be checked or unchecked programmatically by setting this attribute. I've just tested under Mozilla Firefox 94.0.2 and Microsoft Edge 96.0.1054.43. However, document.getElementById('checkbox').checked = true and document.getElementById('checkbox').checked = false work as expected (but don't trigger a change event as stated in many posts).
    – gouessej
    Dec 7, 2021 at 13:52
17

I would like to note, that setting the 'checked' attribute to a non-empty string leads to a checked box.

So if you set the 'checked' attribute to "false", the checkbox will be checked. I had to set the value to the empty string, null or the boolean value false in order to make sure the checkbox was not checked.

1
  • 8
    This is because a non-empty string is regarded as truthy. Jan 5, 2016 at 15:55
15

Using vanilla js:

//for one element: 
document.querySelector('.myCheckBox').checked = true  //will select the first matched element
document.querySelector('.myCheckBox').checked = false//will unselect the first matched element

//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
//iterating over all matched elements

checkbox.checked = true //for selection
checkbox.checked = false //for unselection
}
0
11
function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}
6
<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>
6

For single check try

myCheckBox.checked=1
<input type="checkbox" id="myCheckBox"> Call to her

for multi try

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)
Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

5

If, for some reason, you don't want to (or can't) run a .click() on the checkbox element, you can simply change its value directly via its .checked property (an IDL attribute of <input type="checkbox">).

Note that doing so does not fire the normally related event (change) so you'll need to manually fire it to have a complete solution that works with any related event handlers.

Here's a functional example in raw javascript (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}
<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

If you run this and click on both the checkbox and the button you should get a sense of how this works.

Note that I used document.querySelector for brevity/simplicity, but this could easily be built out to either have a given ID passed to the constructor, or it could apply to all buttons that act as aria-labels for a checkbox (note that I didn't bother setting an id on the button and giving the checkbox an aria-labelledby, which should be done if using this method) or any number of other ways to expand this. The last two addEventListeners are just to demo how it works.

1

I agree with the current answers, but in my case it does not work, I hope this code help someone in the future:

// check
$('#checkbox_id').click()
2
  • 2
    This work if you are using jQuery. The question is about solving it using vanilla js
    – vnapastiuk
    Sep 30, 2021 at 13:41
  • This is very useful if you've got onclick() events ties to the checkbox and you want to trigger them. Simply chaning prop('checked', true) will not trigger the events.
    – Chris
    Nov 19, 2022 at 12:03
1

So I often have multiple checkboxes with the same input name, so they end up grouped nicely when POSTing. To uncheck all checkboxes for that input name, I use something like this:

for (const cbe of document.querySelectorAll('[name=xxx]')) {
    cbe.checked = false;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.