如何使用 DOM 选择器取消选中复选框？

Question

我创建了一个 dom 选择器，它在我的应用程序的一部分中基本上将所有复选框作为节点数组：

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

这个 returns 一个包含 10 个复选框的节点数组，每个节点项如下所示：

>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;">

我想要一次取消选中所有复选框的功能，但我似乎无法使用 dom 选择器实现此目的。我先在一个项目上尝试了一些东西，但它似乎并没有取消选中该框：

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

我已经使用 aria-checked = false 和 value=off 尝试了一些类似的事情，但似乎没有任何效果。关于如何解决此问题并使用 dom 选择器取消选中框的任何建议？

Answer 1

您可以遍历 NodeList 并在每个复选框上将 checked 属性设置为 false。

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

使用jQuery，需要将整个NodeList传递给jQuery函数，或者直接传递一个选择器给它。

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

Answer 2

在 Vanilla js 中，我们需要循环遍历每个复选框以更改其值..但是对于 jQuery 这是小菜一碟

看这个例子=>

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)

如何使用 DOM 选择器取消选中复选框？

How to uncheck checkboxes using a DOM selector?

javascript

jquery

attributes

selector