码迷,mamicode.com
首页 > 其他好文 > 详细

判断复选框中是否有被选中的代码实例

时间:2016-01-03 11:02:29      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

判断复选框中是否有被选中的代码实例:
复选框中一般多项,有时候我们需要判断这些付选中是否有被选中的项,下面就通过一个实例简单介绍一下如何实现此效果。
代码如下:

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>限定复选框的可选个数-蚂蚁部落</title>
</head> 
<script type="text/javascript"> 
function num()
{
  var checboxs=document.getElementsByName("ck"); 
  var len=checboxs.length;
  var arr=new Array();
  for(var i=0;i<len;i++)
  {
    if(checboxs[i].checked)
{
   arr.push(i+1);
    }
  }
  alert(arr);
}
window.onload=function()
{
  var bt=document.getElementById("bt");
  bt.onclick=num;
}
</script> 
<body > 
<div id="box"> 
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落一 
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落二
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落三 
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落四
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落五
<p></p> 
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落六
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落七 
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落八
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落九 
<label><input type="checkbox" name="ck" width="30px;"/></label>蚂蚁部落十 
</div> 
<input type="button" value="检测选中哪几项" id="bt" />
</body> 
</html> 

 

以上代码当点击按钮的时候,可以弹出被选中了哪几个。代码比较简单这里就不多介绍了,只简单介绍一下原理:
通过getElementsByName()函数获取checkbox对象集合,然后便利此集合,然后判断每一项是否被选中,如果被选中就将此复选框的顺序存入数组,最后弹出,就这么简单。
相关阅读:
1.getElementsByName()函数可以参阅javascript的document.getElementsByName()方法一章节。
2.checked可以参阅javascript的checkbox.checked属性一章节。
3.push()函数可以参阅JavaScript的Array对象的push()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8925

更多内容可以参阅:http://www.softwhy.com/javascript/

 

判断复选框中是否有被选中的代码实例

标签:

原文地址:http://www.cnblogs.com/come-on/p/5095842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!