您的位置：首页 > Web前端 > JavaScript

js操作input控件【radio、checkbox】

2013-06-05 16:10 676 查看

<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.onclick=createElement('input','name','radio','value'+i);

将无法达到预期的目的，建议采用以下方法

document.createElement('<input id="dd" onclick=""/>');

但是次方法火狐浏览器不支持。

*/

}

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" onclick="aa()" value="显示checkbox的值和后面的文本"/>

<input type="button" onclick="bb()" value="动态添加radio"/>

<div id="div">动态添加radio：<br></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航