JS单选按纽组事件

JavaScript08

JS单选按纽组事件,第1张

<html>

<head>

<title>test</title>

<script type="text/javascript">

function test(){

//list则是这个按钮组

var list = document.getElementsByName("ck")

//默认值

var defaultValue = 1

for(var i = 0 i <list.lengthi++){

if(list[i].type == "radio"){

list[i].onclick = function(){

defaultValue = this.value

alert("defaultValue: "+ defaultValue)

}

}

}

}

</script>

</head>

<body onload="test()">

请选择:<br/>

<input type="radio" name="ck" value="1" checked />1<br/>

<input type="radio" name="ck" value="2" />2<br/>

<input type="radio" name="ck" value="3" />3<br/>

</body>

</html>

// 几个小问题和你点一下吧。

// 1、html控件,理论上id是唯一的,页面上每一个控件的id需要设置不同

//    虽然你设置相同了也没有问题,但是用了js的话,会出现很多不必要的错误。

//    所以你的 id="a" 和 id="b" 这几个要去掉。

// 2、在js中,如果你确定页面上有 id="a3" 的控件,然后在所有 js 中

//    又没有 var a3 的定义,那么 a3.value 效果就是 

//    document.getElementById("a3").value

//    你后面的 a.value 和 b.value 由于页面上存在相同 id="a" id="b"的控件,

//    所以也就自然是有问题的了

// 3、使用parseInt方法,一般是10进制运算,建议加上 paserInt(value,10)

//    后面的10是让数字作为10进制数字来运算,

//    否则,当value="08"的时候,就会把08作为默认的8进制来运算,

//    这样也会出现很多你一下子不理解的计算结果了,

//    而你使用 parseInt("08",10)最终就是等于8;

// 4、你要所有选中的radio进行计算,那么要遍历所有的radio控件,

//    查看是否被选择,有很多方法,

//    你可以遍历所有的name="a"name="b"的控件;

//    也可以对每个radio加上id,然后每个都判断;

//    也可以遍历所有的input

// 5、具体给你提供遍历所有radio的方法吧,附件中有,你自己看一下咯

我只能说,你这逻辑明显不对,你应该是要为每一个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>