时间戳

首页 > 解决方案 > 如何使用 DOM 选择器取消选中复选框？

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

问题描述

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

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

这将返回一个包含 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 选择器取消选中框的任何建议？

标签： javascriptjqueryattributesselector

解决方案

您可以遍历每个复选框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);

推荐阅读