How to uncheck checkboxes using a DOM selector?

Question

I have created a dom selector that essentially has all of the checkboxes as a node array in part of my app:

 var checkboxes = document.getElementById("factors").querySelectorAll('input[type=checkbox]');

This returns a node array for 10 checkboxes with each of the node items looking like this:

>checkbox[0]
><input name="chkVal0" type="checkbox" role="checkbox" aria-checked="true" class="dijitReset dijitCheckBoxInput" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" value="on" tabindex="0" id="dijit_form_CheckBox_0" checked="checked" style="user-select: none;">

I want to have a function that unchecks all of the checkboxes at once, but I can't seem to achieve this using the dom selector. I've tried a few things on a single item first, but it doesn't seem to uncheck the box:

var checkbox_one = checkboxes[0];

//Using jquery and props
$(checkbox_one).prop("checked", "unchecked") //Nothing

//2nd try
$(checkbox_one).prop("checked", false) //Nothing

//3rd try using attr
$(checkbox_one).attr("checked", "uncheck"); //Nothing

$(checkbox_one).attr("checked", false); //Nothing

I've tried a few similar things using aria-checked = false and value=off but nothing seems to work. Any suggestions on how to overcome this issue and get the boxes to uncheck using the dom selector?

`$(checkbox_one).prop("checked", false)` works; `.attr("checked", false)` sets the _initial_ checked value, which won’t help you; the string from the other attempts is meaningless. Is your ` — Sebastian Simon, Jun 23 '21 at 19:14
`$(checkbox_one).prop("checked", false)` should uncheck the checkbox. You could also make it easier on yourself and just do `checkbox_one.checked = false;`. — Heretic Monkey, Jun 23 '21 at 19:16
I've basically been testing this out in the Browsers Dev console. The js code is in a completely separate js file from the html and I'm using other dom selectors without issue. — gwydion93, Jun 23 '21 at 19:18

score 2 · Accepted Answer · answered Jun 23 '21 at 19:14

2

You can loop over the NodeList and set the checked property to false on each checkbox.

var checkboxes = document.getElementById("factors").querySelectorAll('input[type=checkbox]');
for(const checkbox of checkboxes){
   checkbox.checked = false;
}

With jQuery, you need to pass the entire NodeList to the jQuery function, or directly pass a selector to it.

$(checkboxes).prop('checked', false);
// or
$('#factors input[type=checkbox]').prop('checked', false);

answered Jun 23 '21 at 19:14

Unmitigated

76,500
11
62
80

True; yet the above solutions are still not working for me. I did find multiple answers but none seem to be working for me. – gwydion93 Jun 23 '21 at 19:26
@gwydion93 Do you get any errors in the console? – Unmitigated Jun 23 '21 at 19:26
@gwydion93 Please, [edit] your question and provide a [mre]. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. – Sebastian Simon Jun 24 '21 at 07:47

score 1 · Answer 2 · answered Jun 23 '21 at 19:27

In Vanilla js we need to loop over each checkbox to change its value .. but with jQuery it's a piece of cake

See this example =>

HTML

<div>
  <input type="checkbox" checked />
  <input type="checkbox" checked />
  <input type="checkbox" checked />
</div>

Js

  let checkboxes = document.querySelectorAll('input[type=checkbox]')
   // Using forEach loop 
  checkboxes.forEach(checkbox => checkbox.checked = false)

jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery

  // a single line of code with jQuery !
  $('input:checkbox').prop('checked', false)

How to uncheck checkboxes using a DOM selector?

2 Answers2