本文通过一个具体的HTML页面示例，展示了如何使用JavaScript为页面上的多个单选按钮添加点击事件监听器，并在点击时弹窗显示被点击按钮的序号。此示例涉及HTML结构、JavaScript事件处理及DOM操作等前端开发基础技能。
<html>
<head>
</head>
<body>
<form name ="form1" onsubmit ="return foo();">
<input type ="radio" name ="radioGroup"/>
<input type ="radio" name ="radioGroup"/>
<input type ="radio" name ="radioGroup"/>
<input type ="radio" name ="radioGroup"/>
<input type ="radio" name ="radioGroup"/>
<input type ="radio" name ="radioGroup"/>
<input type ="submit"/>
</form>
<script>
var foo = (function(){
var radio_list = (function(){
var _list = [],
nodes = document.getElementsByTagName('input');
for(var i = 0; i < nodes.length; ++i){
var node = nodes[i];
if(node.type == 'radio' && node.name == 'radioGroup'){
if(node.attachEvent)
node.attachEvent('onclick', function(e){foo(e)} );
else if(node.addEventListener)
node.addEventListener('click', function(e){foo(e)}, false);
_list.push(node);
}
}
return _list;
})();
return function(e){
var o = (function(){
if(e) return e.target || e.srcElement;
else if(window.event) return e.srcElement;
})();
for(var i = 0; i < radio_list.length; ++i){
if(o == radio_list[i]){
alert(++i);
break;
}
}
}
})();
</script>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
