代码之家 › 专栏 › 技术社区 › vikitor

如何访问单选按钮单个项目?

javascript

vikitor · 技术社区 · 15 年前

根据在另一个单选按钮上选择的值,我有两个单选按钮组显示不同。问题是我想将组的默认值设置为单选按钮组中的第一个元素,但是当我从另一个单选按钮更改时,它将保留以前选择的值,当我想将其重置为默认值时。

我一直在javascript存储库中搜索,但显然我不能像上面说的那样访问 radio[1].checked = true …它说 radio[1] 未定义,但radio是一个html输入元素对象。我从另一个文件访问它,但是 var radio = document.getElementById("radio") 可以,但我无法访问单个单选按钮。

提前谢谢你

4 回复 | 直到 15 年前

Robusto 15 年前

如果给每个单选按钮一个单独的ID,就可以访问它们。“name”属性定义组。

uotonyh 15 年前

我同意Robusto的观点,你应该给你的radio元素id属性,并以这种方式引用它们。

但是,您也可以访问 form.elements[] 数组,然后按以下方式访问单选按钮值:

for( i = 0; i < document.formname.elements.length; i++ ) {
  if(document.formname.elements[i].type == "radio") {
    document.formname.elements[i].checked = true;
  }
}

Álvaro González 15 年前

你可以按照您描述的方式访问它们:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
</head>
<body>

<form action="" method="get">
    <input type="radio" name="foo" value="One">
    <input type="radio" name="foo" value="Two">
    <input type="button" value="Show info" onclick="showInfo()">
</form>

<script type="text/javascript"><!--
function showInfo(){
    var info = "";
    for(var i=0, len=document.forms[0].foo.length; i<len; i++){
        info += "Radio button " + document.forms[0].foo[i].name + " is " + (document.forms[0].foo[i].checked ? "checked" : "not checked") + " and has a value of '" + document.forms[0].foo[i].value + "'\n";
    }
    alert(info);
}
//--></script>

</body>
</html>

Daniel Vandersluis 15 年前

如果要引用组中的特定单选按钮,请使用 id 根据罗布斯托的回答,属性是解决问题的方法。但是,如果要对组中的每个单选按钮执行操作,可以使用 getElementsByName ,它返回使用给定名称找到的所有元素的集合:

var radio_buttons = document.getElementsByName("radio");
for (var i = 0; i < radio_buttons.length; i++)
{
  // do something with radio_buttons[i]
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前