关于checkbox选择个数限制

最新推荐文章于 2024-01-09 13:07:01 发布

firseve

最新推荐文章于 2024-01-09 13:07:01 发布

阅读量956

点赞数

分类专栏： JavaScript 文章标签： Google C C++ C# HTML

本文链接：https://blog.csdn.net/firseve/article/details/83533890

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

普通的标签一般都具有比较特别的属性，如这个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[i].checked){t++;}
					if(t>maxck){return false;}
				}
				return true;
			}
			for(i=0;i<cks.length;i++){
				cks[i].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[i].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>

firseve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于checkbox选择个数限制

普通的标签一般都具有比较特别的属性，如这个checkbox 判断是否选中就有checked这个属性--是否选中，平时我们写的时候有的只写一个 checked 这样标签就被选中了有时候工具会提示我们使用 checked ="checked"最终的结果和上面一样，这样就给我们一个幻觉，checkbox的checked有checked和空两个属性，其实不然，checked是一个状态对应是...
复制链接

扫一扫

专栏目录