js如何限制可以被选中复选框的个数:
在有些时候往往需要限制复选框可以被选中的个数,比如在一些对个人介绍的一些选项中,可能会有一些选项个数的限制,或者更形象的一个例子,当领取一些福利的时候,你不可能每一样都是可选的,都会有一些种类上的限制,下面就通过一个实例介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <title>限定复选框的可选个数-蚂蚁部落</title> </head> <script language="javascript"> function checboxNum(name,num) { var checboxs=document.getElementsByName(name); var a=0; for(var i=0;i<checboxs.length;i++) { if(checboxs[i].checked) { a=a+1; } } if(a==num) { for(var i=0;i<checboxs.length;i++) { if(!checboxs[i].checked) { checboxs[i].disabled='disabled'; } } } else { for(var i=0;i<checboxs.length;i++) checboxs[i].removeAttribute('disabled'); } } window.onload=function() { var box=document.getElementById("box"); box.onclick=function() { checboxNum("ck",3); } } </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> </body> </html>
以上代码实现了我们的要求,可以规定能够选中的复选框的数量,当达到这个数量之后,其他的复选框将会被设置为不可用状态,下面简单介绍一下实现过程。
一.实现原理:
效果看起来不错,原理其实非常的简单,就是为checkbox的父元素div注册onclick事件处理函数,当点击选中复选框的时候就会触发onclick事件,然后通过事件冒泡现象传递到div父元素,这样就会执行事件处理函数。在函数中,会遍历所有的复选框,每选中一个变量a就会+1,如果数量到达规定的数量,除了被选中的复选框之外,其他的复选框都会被设置为不可用。
二.代码注释:
1.function checboxNum(name,num){},div的onclick事件处理函数,name是复选框的name属性值,num是可以选中的数量。
2.var checboxs=document.getElementsByName(name),获取复选框对象集合。
3. var a=0,声明一个变量a,并赋初值0.
4.for(var i=0;i<checboxs.length;i++),遍历所有的复选框。
5.if(checboxs.checked),如果复选框被选中。
6.a=a+1,a的值+1。
7.if(a==num),如果a的值达到规定的可选数量。
8.for(var i=0;i<checboxs.length;i++) ,遍历所有的复选框。
9.if(!checboxs.checked),如果复选框没有被选中。
10.checboxs.disabled='disabled',将没有被选中的设置为不可用。
11.for(var i=0;i<checboxs.length;i++) ,遍历复选框。
12.checboxs.removeAttribute('disabled'),将复选框设置为可用。
13.window.onload=function(){},文档内容完全加载完毕再去执行函数中的代码。
14.var box=document.getElementById("box"),获取div对象。
15.box.onclick=function(),为div对象注册事件处理函数。
三.相关阅读:
1.getElementsByName()函数可以参阅javascript的document.getElementsByName()方法一章节。
2.checked属性可以参阅javascript的checkbox.checked属性一章节。
3.disabled属性可以参阅javascript的checkbox.disabled属性一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8886
更多内容可以参阅:http://www.softwhy.com/javascript/