使用类取消选中 Javascript 中的单选按钮答案

【问题标题】：Uncheck a Radio button in Javascript using the class使用类取消选中 Javascript 中的单选按钮
【发布时间】：2015-02-08 14:16:25
【问题描述】：

这是我的 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。但我想通过使用类取消选中它

当函数包含：

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

它不会取消选中 Button2

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

谢谢。 :)

【问题讨论】：

两个按钮具有相同的类名，您希望代码如何工作？你必须给它一些东西来区分所需的按钮。

标签： javascript class button checkbox

【解决方案1】：

getElementsByClassName() 返回一个集合（如数组）。所以你实际上必须这样做

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

但如果您有更多的 Button 类元素，您无法确定您的 Button2 是数组中的第二个元素。

【讨论】：

【解决方案2】：

你必须遍历类元素！

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

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

【讨论】：

【解决方案3】：

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

如果你想对节点列表中的每个元素做一些事情，那么你必须循环它并对列表中的每个项目做事情。

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

【讨论】：

【解决方案4】：

document.getElementsByClassName 返回该类名元素的节点列表（有点像这些元素的数组）。所以你应该循环遍历它并更改每个元素的选中状态。

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

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;

【讨论】：

它不返回数组。它返回一个节点列表。如果你尝试在其上调用数组方法，你会得到错误。
@Quentin：已编辑。我只是想简化事情。无论如何，编辑。 :)

【解决方案5】：

你打电话给document.getElementsByClassName('Button').checked = false;，而它应该是document.getElementsByClassName('Button')[1].checked = false;

getElementsByClassName() 返回一个数组

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()"/>

【讨论】：