js操作input控件【radio、checkbox】

最新推荐文章于 2023-12-13 15:32:43 发布

kissing7

最新推荐文章于 2023-12-13 15:32:43 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： JavaScript CheckBox 控件浏览器兼容性

本文链接：https://blog.youkuaiyun.com/kissing7/article/details/9031801

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript操作HTML中的input元素，特别是针对checkbox和radio类型的控件。内容包括获取选中的checkbox值、动态添加radio控件及其相关事件绑定。示例代码展示了在不同浏览器环境下创建和操作这些元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js操作input控件</title>
</head>
<script language="javascript">
function aa(){
var r=document.getElementsByName("r");
for(var i=0;i<r.length;i++){
if(r[i].checked){
alert('选择的checkbox为：'+r[i].value+","+r[i].nextSibling.nodeValue);
}else
alert(+r[i].value+","+r[i].nextSibling.nodeValue);
}
/* nextSibling是获得当前对象的下一个对象
nodeValue是返回一个节点的值
radio道理一样
*/
}
function bb(){
for(var i=0;i<4;i++){
var ele=createElement('input','name','radio','value'+i);
var span=document.createElement('span');
span.id='span'+i;
span.innerText='span'+i;
div.appendChild(ele);
div.appendChild(span);
}
/*
如果循环给控件添加事件，例如
ele.οnclick=createElement('input','name','radio','value'+i);
将无法达到预期的目的，建议采用以下方法
document.createElement('<input id="dd" οnclick=""/>');
但是次方法火狐浏览器不支持。
*/
}
function createElement(tagName,name,type,value)//动态添加input
{
var element = null;
try {//次方法针对ie
element = document.createElement('<'+tagName+' name="'+name+'" />');
element.type = type;
element.value = value;
}
catch (e){}
if (!element){//如果用此方法添加，ie6以上浏览器，所看到的radio将不能被点击
element = document.createElement(tagName);
element.setAttribute("type",type);
element.setAttribute("name",name);
element.setAttribute("value",value);
}
return element;
}
</script>
<body>
<input type="checkbox" name="r" value="1">a<br>
<input type="checkbox" name="r" value="2">b<br>
<input type="checkbox" name="r" value="3">c<br>
<input type="checkbox" name="r" value="4">d<br>
<input type="checkbox" name="r" value="5">e<br>
<br>
<input type="button" οnclick="aa()" value="显示checkbox的值和后面的文本"/>
<input type="button" οnclick="bb()" value="动态添加radio"/>
<div id="div">动态添加radio：<br></div>
</body>
</html>