happysoul 发表于 2013-2-7 20:15:57

关于checkbox选择个数限制

普通的标签一般都具有比较特别的属性,如这个checkbox 判断是否选中就有checked这个属性--是否选中,平时我们写的时候有的只写一个 checked
<input type="checkbox" name="a" checked >这样标签就被选中了
有时候工具会提示我们使用 checked ="checked"
<input type="checkbox" name="a" checked="checked" >
最终的结果和上面一样,这样就给我们一个幻觉,checkbox的checked有checked和空两个属性,其实不然,checked是一个状态对应是否被选中所以就有了true 和 false
对于大量的 复选框 有的时候我们需要限制用户选择的个数
于是我就对这个简单的需求谢了一个简单的方法,传入checkbox的name还有最大可选择个数就可以增加限制条件了,闭包的方式为每一个checkbox增加检测事件

后面那个是有个别地方在限制不同选择结果对应不同的提交请求,不过这种方式的提交baidu和Google可不买账,呵呵 直接被忽略掉

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>多选框</title><script>function $A(name){return document.getElementsByName(name);}window.onload=function(){/** * 复选框限制 * @param {Object} name 复选框的name * @param {Object} maxck 最多复选个数 */function checks(name,maxck){var cks = $A(name);function check(){var t=0;for(i=0;i<cks.length;i++){if(cks.checked){t++;}if(t>maxck){return false;}}return true;}for(i=0;i<cks.length;i++){cks.onclick=function(){if(!check()){alert("最多选择"+maxck+"个");this.checked=false;}}}}checks("ck",3);//这里如果加入对ck2的检测也可以避免6个以上//checks("ck2",6);   document.form1.onsubmit=function(){var t=0;var maxck=6;var ck2=$A("ck2")for(i=0;i<ck2.length;i++){if(ck2.checked){t++;}if(t>maxck){this.action="http://www.baidu.com";}}return true;}}</script></head><body><form name="form1" method="post" action="http://www.g.cn">对这个限制3个选择<br><input type="CHECKBOX" name="ck" value="A">A<input type="CHECKBOX" name="ck" value="B">B<input type="CHECKBOX" name="ck" value="C">C<input type="CHECKBOX" name="ck" value="D">D<input type="CHECKBOX" name="ck" value="E">E<input type="CHECKBOX" name="ck" value="F">F<input type="CHECKBOX" name="ck" value="G">G<input type="CHECKBOX" name="ck" value="H">H<input type="CHECKBOX" name="ck" value="I">I<input type="CHECKBOX" name="ck" value="J">J<br>对这个限制6个提交,<=6个到www.g.cn   >6个到www.baidu.com<br><input type="CHECKBOX" name="ck2" value="A">A<input type="CHECKBOX" name="ck2" value="B">B<input type="CHECKBOX" name="ck2" value="C">C<input type="CHECKBOX" name="ck2" value="D">D<input type="CHECKBOX" name="ck2" value="E">E<input type="CHECKBOX" name="ck2" value="F">F<input type="CHECKBOX" name="ck2" value="G">G<input type="CHECKBOX" name="ck2" value="H">H<input type="CHECKBOX" name="ck2" value="I">I<input type="CHECKBOX" name="ck2" value="J">J<input type="submit" value="确定"></form></body></html>
页: [1]
查看完整版本: 关于checkbox选择个数限制