我只能说，你这逻辑明显不对，你应该是要为每一个radio控件绑定onclick事件，点击的时候alert一下。
你的代码有几个错误。
1、getElementsByName("radios")返回的是一个数组，你不能为一个数组对象绑定onclick事件
2、循环绑定js的onclick事件，需要借用闭包或者函数的方式，否则绑定的onclick事件都会是最后一个对象的方法。
以下是我用闭包的方式解决你的绑定方法，你可以看一下，把你的所有js去掉，页面不变，js换成如下代码：
<script type="text/javascript">var box = document.getElementsByName("radios")
// 循环为每个 radio 绑定 onclick 事件
for (var i = 0 i < box.length i++) {
(function() {
var boxone = box[i]
box[i].onclick = function() {
// 如果当前的 radio 被选中，则 alert 他的 value
if (boxone.checked) {
alert(boxone.value)
}
}
})()
}
</script>
本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下：
1.设置单选按钮
单选按钮在表单中即<input
type="radio"
/>它是一组供用户选择的对象，但每次只能选一个。每一个都有checked属性，当一项选择为ture时，其它的都变为false.
先贴上一个例子：
复制代码
代码如下:<script
type="text/javascript">
function
getChoice()
{
var
oForm
=
document.forms["uForm1"]
var
aChoices
=
oForm.camera
for
(i
=
0
i
<
aChoices.length
i++)
//遍历整个单选项表
if
(aChoices[i].checked)
//如果发现了被选中项则退出
break
alert("相机品牌是："
+
aChoices[i].value)
}
function
setChoice(iNum)
{
var
oForm
=
document.forms["uForm1"]
oForm.camera[iNum].checked
=
true
}
</script>
<form
method="post"
name="uForm1"
action="addInfo.aspx">
相机品牌：
<p>
<input
type="radio"
name="camera"
id="canon"
value="Canon">
<label
for="canon">Canon</label>
</p>
<p>
<input
type="radio"
name="camera"
id="nikon"
value="Nikon">
<label
for="nikon">Nikon</label>
</p>
<p>
<input
type="radio"
name="camera"
id="sony"
value="Sony"
checked>
<label
for="sony">Sony</label>
</p>
<p>
<input
type="radio"
name="camera"
id="olympus"
value="Olympus">
<label
for="olympus">Olympus</label>
</p>
<p>
<input
type="radio"
name="camera"
id="samsung"
value="Samsung">
<label
for="samsung">Samsung</label>
</p>
<p>
<input
type="radio"
name="camera"
id="pentax"
value="Pentax">
<label
for="pentax">Pentax</label>
</p>
<p>
<input
type="radio"
name="camera"
id="others"
value="其它">
<label
for="others">others</label>
</p>
<p>
<input
type="submit"
name="btnSubmit"
id="btnSubmit"
value="Submit"
class="btn">
</p>
<p>
<input
type="button"
value="检测选中对象"
onclick="getChoice()">
<input
type="button"
value="设置为Canon"
onclick="setChoice(0)">
</p>
</form>
这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>JQuery radio</title>
<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
<script type="text/javascript">
$(function () {
$("input").click(function () {
if ($(this).attr("checked")) {
alert("选中了")
}
})
})
</script>
</head>
<body>
<input type="radio"/>
</body>
</html>
扩展资料：注意事项
<form>
<input type="radio" id="radio1" />
<input type="button" οnclick="check()" value="选中" />
<input type="button" οnclick="uncheck()" value="取消" />
</form>
function check() {
//被选中
document.getElementById("radio1").checked = true
//被选中时，可以执行的方法
if(document.getElementById("radio1").checked == true){
console.log('==')
}
}
function uncheck() {
//不选中
document.getElementById("radio1").checked = false
//不被选中时，可以执行的方法
if(document.getElementById("radio1").checked == false){
console.log('++')
}
}
