使用 class 取消选中 Javascript 中的单选按钮

Question

这是我的 2 个单选按钮：

 <input type="radio" name="sex" id="Button1" class="Button"/>

 <input type="radio" name="sex" id="Button2" class="Button"/>

当我调用一个函数时：

document.getElementById('Button2').checked = false;

取消选中 Button2。但我想使用 class

取消选中它

当函数包含：

document.getElementsByClassName('Button').checked = false;

它不会取消选中 Button2

为什么以及解决方案是什么？

谢谢。 :)

Answer 1

getElementsByClassName returns 节点列表（类似于数组）而不是元素。

如果你想对节点列表中的每个元素做某事，那么你必须遍历它并对列表中的每个项目做这件事。

var node_list = document.getElementsByClassName('Button');
for (var i = 0; i < node_list.length; i++) {
    node_list[i].checked = false;
}

Answer 2

document.getElementsByClassName returns 该 class 名称的元素的节点列表（有点像这些元素的数组）。所以你应该循环它并改变每个元素的检查状态。

对于通用方法（您可以有任意多个复选框），请使用此代码。

var allButtons = document.getElementsByClassName("Button");
for (i=0; i<allButtons.length; i++) {
    allButtons[i].checked = false;
}

如果你打算只有 2 个元素，你可以使用

var allButtons = document.getElementsByClassName("Button");
for (i=0; i<2; i++) {
    allButtons[i].checked = false;
}

或

var allButtons = document.getElementsByClassName("Button");
allButtons[0].checked = false;
allButtons[1].checked = false;

Answer 3

getElementsByClassName() returns 一个集合（像一个数组）。所以你实际上必须做

document.getElementsByClassName('Button')[1].checked = false;

但是如果你有更多 class Button.

的元素，你不能确定你的 Button2 是数组中的第二个元素

Answer 4

您必须遍历 class 个元素！

   var elements=document.getElementsByClassName('Button');

    Array.prototype.forEach.call(elements, function(element) {
       element.checked = false;
    });

Answer 5

你在 document.getElementsByClassName('Button').checked = false; 应该 document.getElementsByClassName('Button')[1].checked = false;

的时候打电话

getElementsByClassName() returns 一个数组

function unCheck(){
  document.getElementsByClassName('Button')[1].checked = false;
}

<input type="radio" name="sex" id="Button1" class="Button" /> 
<input type="radio" name="sex" id="Button2" class="Button" checked/>
<input type="button" value="Uncheck Radio" onclick="unCheck()"/>

使用 class 取消选中 Javascript 中的单选按钮

Uncheck a Radio button in Javascript using the class

javascript

checkbox

class

button