代码之家 › 专栏 › 技术社区 › CheeseFlavored

如何一次禁用网页上的所有复选框?

input checkbox javascript

CheeseFlavored · 技术社区 · 7 年前

我在一个网页上有几组复选框。我想用javascript取消选中它们。现在,我通过查找每个集合的名称并用for循环取消选中它们来完成这项工作,就像这样。。。

    for (i=0;i<document.getElementsByName("myboxes").length;i++) {
document.getElementsByName("myboxes")[i].checked=false;}

for (i=0;i<document.getElementsByName("moreboxes").length;i++) {
document.getElementsByName("moreboxes")[i].checked=false;}

for (i=0;i<document.getElementsByName("evenmoreboxes").length;i++) {
document.getElementsByName("evenmoreboxes")[i].checked=false;}

getElementsByTagName('input') 以所有输入为目标,但这是一个问题,因为我有一些不想取消选中的无线电输入。有没有办法针对所有人 checkbox inputs

谢谢你的建议。我只是想到了一件事。我使用的每个名字里都有“盒子”这个词,我的盒子,更多的盒子,甚至更多的盒子。是否有一种方法可以将名称中的单词“box”作为目标,比如通配符之类的 document.getElementsByName("*boxes") 这样,如果我在某个我不想取消选中的点添加一组复选框,我可以简单地以不同的方式命名它们。

4 回复 | 直到 7 年前

customcommander 7 年前

您可以选中所有复选框并重置其状态:

function uncheckAll() {
  document.querySelectorAll('input[name$="boxes"]:checked')
    .forEach(checkbox => checkbox.checked = false);
}

<input type="checkbox"/>
<input type="checkbox" name="a_boxes" checked/>
<input type="checkbox"/>
<input type="checkbox" name="b_boxes" checked/>
<input type="checkbox" name="c_boxes" checked/>


<button onclick="uncheckAll()">Reset</button>

imjared 7 年前

document.querySelectorAll('input[type="checkbox"]'); 去弄一份他们所有人的名单。然后运行循环

gaetanoM 7 年前

我的建议是:

document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => echecked=false);

document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => e.checked=false);

<input type="checkbox" name="myboxes" value="1" checked>1<br>
<input type="checkbox" name="moreboxes" value="2" checked>2<br>
<input type="checkbox" name="evenmoreboxes" value="3" checked>3<br>

jo_va 7 年前

querySelectorAll

querySelectorAll('input[type="checkbox"]').forEach(c => c.checked = false);

这是你的电话号码 doc for querySelectorAll

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前