星空网 > 软件开发 > Java

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

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

 

<!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/

 




原标题:判断复选框中是否有被选中的代码实例

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海外仓对跨境电商卖家的必要性是什么?有没有缺点? :https://www.goluckyvip.com/news/9484.html
以星成立新班轮公司、TikTok成英国人下单量最高社交平台|跨境热点速递 :https://www.goluckyvip.com/news/9485.html
终止当日达服务,这家快递巨头怎么了? :https://www.goluckyvip.com/news/9486.html
虾皮shopee、lazada使用测评补单做推广有哪些优势和技巧 :https://www.goluckyvip.com/news/9487.html
FBA卖家必看!亚马逊大裁员仓库大罢工,将让卖家利润降低3% :https://www.goluckyvip.com/news/9488.html
出海快讯:TikTok广告收入体现其海外社交媒体地位 :https://www.goluckyvip.com/news/9489.html
宠物梳专利查询分析:https://www.kjdsnews.com/a/1842293.html
温州旧货市场有玻璃柜卖吗?:https://www.vstour.cn/a/411246.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流