如何清除Javascript中的单选按钮？答案

【问题标题】：How to clear radio button in Javascript?如何清除Javascript中的单选按钮？
【发布时间】：2011-02-02 23:46:39
【问题描述】：

我有一个名为“选择”的单选按钮，其中包含“是”和“否”选项。如果我选择任何一个选项并单击标有“清除”的按钮，我需要使用 javascript 清除所选选项。我怎样才能做到这一点？

【问题讨论】：

标签： javascript html

【解决方案1】：

您不需要为元素设置唯一的id，您可以通过它们的name 属性访问它们：

如果您使用的是name="Choose"，那么：

使用 jQuery 就这么简单：
$('input[name=Choose]').attr('checked',false);
或纯 JavaScript：
var ele = document.getElementsByName("选择"); for(var i=0;i
Demo for JavaScript

【讨论】：

其实这是大卫安德森的建议。我想我在发帖之前错过了他的评论。
+1 它真正有效的 NVRAM .. 谢谢，我选择这个作为我接受的答案。感谢大家的宝贵回答。
在 1.6 以上的 jquery 版本中使用 $('input[name=Choose]').prop('checked',false);

【解决方案2】：

如果你不打算使用jQuery，你可以使用像这样的简单javascript

document.querySelector('input[name="Choose"]:checked').checked = false;

这样做的唯一好处是您不必为两个单选按钮使用循环

【讨论】：

【解决方案3】：

这应该可行。确保每个按钮都有唯一的 ID。（将 Choose_Yes 和 Choose_No 替换为您的两个单选按钮的 ID）

document.getElementById("Choose_Yes").checked = false;
document.getElementById("Choose_No").checked = false;

如何命名单选按钮的示例：

<input type="radio" name="Choose" id="Choose_Yes" value="1" /> Yes
<input type="radio" name="Choose" id="Choose_No" value="2" /> No

【讨论】：

如果我有一个共同的 id 手段，那我该如何继续？
您需要将其更改为单独的 ID。一个页面上不应有多个相同的 ID。您需要使用相同的名称使其成为单选按钮组，但 ID 必须是唯一的。
@i2ijeya 我会使用jquery.com 之类的库，如果我想一次选择更多单选按钮，我可以在其中按类选择。您也可以使用 document.getElementsByName("Choose")。
虽然 jQuery 很棒，但它并不需要用于 JavaScript 的每一点。在这种情况下，对于在纯 JavaScript 中非常简单的事情来说，这只是不必要的开销。
正如大卫所说，您可以通过 name 访问，因此此功能不需要 id。另外，我怀疑是一个错字——两个按钮的 value 相同。

【解决方案4】：

清除一组单选按钮的 ES6 方法：

    Array.from( document.querySelectorAll('input[name="group-name"]:checked'), input => input.checked = false );

【讨论】：

【解决方案5】：

添加第三个按钮（“两者都没有”）会产生与未选择相同的结果，难道不是更好的选择吗？

【讨论】：

我引用了这个解决方案。单选按钮，作为 UI 元素，并不意味着被重置（即：它们都没有被选中）。它们被设计为从选中 1 个选项开始，并且可以更改它。您可以考虑将单选按钮更改为下拉列表：{empty}|Yes|No
@Filini Windows 窗体编程有 3 态单选按钮，不知道为什么它们不能用于 Web。
@Shawn，你确定你没有考虑三态复选框吗？无论如何，这与重置单选按钮的可能性有什么关系？
@Filini - 有时您可能需要重置单选按钮，所有这些都未选中。我在测验应用程序中遇到了情况 - 当用户重新启动测验时，所有选项（单选按钮）都应该取消选中（在 AngularJS 中创建）。

【解决方案6】：

就我而言，这完成了工作：

const chbx = document.getElementsByName("input_name");

for(let i=0; i < chbx.length; i++) {
    chbx[i].checked = false;
}

【讨论】：

我遇到了这个 js 代码的问题。当您重置无线电接地时，每当我再次选择相同的值时，我都会得到一个未定义的

【解决方案7】：

简单，无需 jQuery：

<a href="javascript:clearChecks('group1')">clear</a>

<script type="text/javascript">
function clearChecks(radioName) {
    var radio = document.form1[radioName]
    for(x=0;x<radio.length;x++) {
        document.form1[radioName][x].checked = false
    }
}

</script>

【讨论】：

【解决方案8】：

如果单选按钮的id是'male'和'female'，可以使用jquery来重置值

$('input[id=male]').attr('checked',false);
$('input[id=female]').attr('checked',false);

【讨论】：

【解决方案9】：

YES<input type="radio" name="group1" id="sal" value="YES" >

NO<input type="radio" name="group1" id="sal1" value="NO" >

<input type="button" onclick="document.getElementById('sal').checked=false;document.getElementById('sal1').checked=false">

【讨论】：

如果选中否，这实际上不会起作用，因为 javascript 永远不会看到具有相同 ID 的第二个元素。
-1。具有相同 ID 的多个元素是无效的 HTML。