如何在Javascript中清除单选按钮？

Question

我有一个名为"选择"的单选按钮，其中包括"是"和"否"两个选项。如果我选择其中任何一个选项，并点击标记为"清除"的按钮，则需要使用JavaScript清除所选选项。如何实现这一点？

- i2ijeya

Answer 1

元素无需拥有唯一的 id，您可以通过它们的name属性来访问它们：

如果您正在使用name="Choose"，那么：

使用最新的jQuery版本

$('input[name=Choose]').prop('checked',false);

使用旧版本的jQuery（<1.6）

$('input[name=Choose]').attr('checked',false);

或使用纯JavaScript

var ele = document.getElementsByName("Choose");
for(var i=0;i<ele.length;i++)
    ele[i].checked = false;

JavaScript演示

- NVRAM

---

其实，这正是David Andersson所建议的。我想在发帖之前错过了他的评论。 - NVRAM

+1 确实在 NVRAM 上运行正常。谢谢，我选择这个作为我的采纳答案。感谢大家宝贵的回答。 - i2ijeya

在 jQuery 版本 1.6 及以上，使用 $('input[name=Choose]').prop('checked',false);。 - Irfan Y

Answer 2

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

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

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

- shriroop_

Answer 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

- Shawn Steward

---

如果我有一个共同的ID，那么我该如何继续？ - i2ijeya

你需要将其更改为单独的ID。页面上不应该有多个相同的ID。您需要使用相同的名称使其成为单选按钮组，但ID必须是唯一的。 - Shawn Steward

@i2ijeya 我会使用像 http://jquery.com/ 这样的库，如果我想要一次选择更多的单选按钮，我可以通过类进行选择。你也可以使用 document.getElementsByName("Choose")。 - David Andersson

虽然jQuery很棒，但并不需要在每一个小的JavaScript部分中都使用它。在这种情况下，使用纯JavaScript就足够了，使用jQuery只会增加不必要的开销。 - Shawn Steward

正如David所说，你可以通过_name_来访问，所以对于这个函数来说_id_是不需要的。另外，我怀疑有一个拼写错误——你的_value_对于两个按钮来说是相同的。 - NVRAM

即使我们具有相同的“id”，也可以清除选择。请参见下面的答案。 - mahi_0707

Answer 4

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

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

- wLc

Answer 5

在我的情况下，这个方法解决了问题：

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

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

- Avag Sargsyan

---

我在这段js代码中遇到了一个问题。当你重置一个单选按钮组时，每当我再次选择相同的值时，我会收到一个未定义的错误。 - Manny Alvarado

Answer 6

加入一个第三个按钮（“无任何选择”）是否是更好的替代方案，它将会产生与没有选择相同的结果？

- Jasper De Bruijn

---

我引用这个解决方案。单选按钮作为UI元素，不应该被重置（即：没有一个被选中）。它们的设计是从1个选项开始选中，并有可能更改它。您可以考虑将单选按钮更改为下拉列表：{empty}|是|否。 - Filini

@Filini Windows表单编程有三态单选按钮，不确定为什么它们不能用于Web。 - Shawn Steward

@Shawn，你确定你不是在考虑三态复选框吗？无论如何，这与重置单选按钮的可能性有什么关系？ - Filini

@Filini - 有时候你可能需要重置单选按钮，让它们全部取消选中。我曾经在一个测验应用中遇到这种情况 - 当用户重新开始测验时，所有选项（单选按钮）应该被取消选中（使用AngularJS创建）。 - Umesh

Answer 7

如果单选按钮的ID为“male”和“female”，可以使用jQuery进行值重置。

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

- Vishnu S

Answer 8

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">

- Salil

---

如果勾选了NO，那么这实际上是行不通的，因为JavaScript永远看不到具有相同ID的第二个元素。 - Shawn Steward

具有相同ID的多个元素是无效的HTML。 - Josh

Answer 9

简单易用，无需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>

- Diodeus - James MacFarlane

Answer 10

有时候我需要从 type="radio" 的 input 中移除 checked 属性:

let el = document.getElementById('your_input_id');
    el.checked = false;
    el.removeAttribute('checked');

- Bartek Qoster