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

我有一个名为“选择”的单选按钮,上面有“是”和“否”两个选项。如果我选择任何一个选项并单击标记为“ clear”的按钮,我需要使用 javascript 清除选中的选项。我怎么才能做到呢?

211478 次浏览

这个应该可以。确保每个按钮都有唯一的 ID。(用两个单选按钮的 ID 替换 Select _ Yes 和 Select _ 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
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">

难道不是一个更好的选择是添加第三个按钮(“两个”) ,将给出相同的结果,因为没有选择?

对于元素,你不需要有唯一的 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 演示

简单,不需要 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>

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

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

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

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

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

如果单选按钮的 id 分别为“男性”和“女性”,则可以使用 jquery 进行值重置

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

对我来说,这样就完成了任务:

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


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

<form>
<input type="radio" name="btn"> Item1
<input type="radio" name="btn"> Item2<br>
<input type="reset">
</form>

这可能有用。