如何清除Javascript中的单选按钮?

IT技术 javascript html
2021-02-21 19:04:28

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

6个回答

您不需要id元素的唯一性,您可以通过它们的name属性访问它们

如果您正在使用name="Choose",则:

  • 使用 jQuery,它很简单:

    $('input[name=Choose]').attr('checked',false);
    
  • 或在纯 JavaScript 中:

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

    JavaScript 演示

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

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

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

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

这应该有效。确保每个按钮都有唯一的 ID。(用两个单选按钮的 ID 替换 Choose_Yes 和 Choose_No)

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 必须是唯一的。
2021-04-25 19:04:28
@ i2ijeya我会用一个库如jquery.com在那里我可以按类别,如果我想一次选择多个单选按钮选择。您也可以使用 document.getElementsByName("Choose")。
2021-04-27 19:04:28
如果我有一个共同的 id 手段,那么我该如何进行?
2021-05-06 19:04:28
正如大卫所说,您可以通过name访问,因此此功能不需要id另外,我怀疑有错别字——两个按钮的相同。
2021-05-06 19:04:28
虽然 jQuery 很棒,但它不需要用于 JavaScript 的每一点。在这种情况下,对于在纯 JavaScript 中非常简单的事情来说,这只是不必要的开销。
2021-05-17 19:04:28

不是更好的选择是添加第三个按钮(“都不是”),它会给出与没有选择相同的结果吗?

@Filini - 有时您可能需要重置所有未选中的单选按钮。我在测验应用程序中遇到了情况 - 当用户重新开始测验时,所有选项(单选按钮)都应该取消选中(在 AngularJS 中创建)。
2021-04-21 19:04:28
@Filini Windows 表单编程具有三态单选按钮,不确定为什么它们不能用于 Web。
2021-04-29 19:04:28
我引用了这个解决方案。单选按钮作为 UI 元素,不应该被重置(即:它们都没有被选中)。它们旨在从选中的 1 个选项开始,并且可以更改它。您可以考虑将单选按钮更改为下拉列表:{empty}|Yes|No
2021-05-10 19:04:28
@Shawn,你确定你没有考虑三态复选框吗?无论如何,这与重置单选按钮的可能性有什么关系?
2021-05-13 19:04:28

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

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