实现Checkbox的互斥选中

最新推荐文章于 2024-05-01 10:49:40 发布

asialee029

最新推荐文章于 2024-05-01 10:49:40 发布

阅读量4.6k

点赞数 1

分类专栏： javascript 文章标签： jquery checkbox 互斥

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

[color=blue] [size=medium]需求其实很简单，就是实现多checkbox的互斥选中，看下面图：AAA和BBB和CCC不能同时选中，当然这个里面可以定义其他规则，CCC和EEE不能同时选中，DDD和EEE不能同时选中。同时选中的时候要进行提示，那几个冲突了，并且将冲突去掉。[/size][/color]

[img]http://dl.iteye.com/upload/attachment/0063/6678/145111a5-cdeb-37af-b5c2-49d33e5a678d.png[/img]

不说了，直接上代码，效果图如上，欢迎大家PK。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
	function clickCallBack(e){
		var rule = [["0","1","4"],["2","4"],["3","4"]];
		var ruleLabel = [["AAA","BBB","EEE"],["CCC","EEE"],["DDD","EEE"]];

		if(!checkCan(rule,ruleLabel)){
			e.checked =false;
		}
	}

	function contains(obj,a) {
		var i = a.length;
		while (i--) {
		   if (a[i] == obj) {
			   return true;
		   }
		}
		return false;
	}

	function checkCan(rule,ruleLabel){
		var checkedVals = new Array();
		jQuery("input[name=test]:checked").each(function(){
			checkedVals.push($(this).val());
		});

		jQuery.each(rule,function(index){
		    var ruleItem = $(this);
			var flag =0;

			for(i=0;i<ruleItem.length;i++){
				if(contains(ruleItem[i], checkedVals)){
				   flag++;
			   }
			}
			if(flag>=ruleItem.length) {
				var ruleLabelItem = ruleLabel[index];
				var promote = "";
				var labelSize = ruleLabelItem.length;
				for(i=0;i<labelSize;i++){
					if(i < labelSize - 1){
					   promote += "'" + ruleLabelItem[i] + "'同";
					} else {
						promote += "'" + ruleLabelItem[i] + "'";
					}
				}
				alert(promote+"是互斥的,不能同时选中!");
				return false;
			}
		});
		return true;
	}
</script>
<title>Insert title here</title>
</head>
<body>
       <input type="checkbox" name="test" value="0" onclick="clickCallBack(this)"/>AAA
	   <input type="checkbox" name="test" value="1" onclick="clickCallBack(this)"/>BBB
	   <input type="checkbox" name="test" value="2" onclick="clickCallBack(this)"/>CCC
	   <input type="checkbox" name="test" value="3" onclick="clickCallBack(this)"/>DDD
	   <input type="checkbox" name="test" value="4" onclick="clickCallBack(this)"/>EEE
	   <input type="checkbox" name="test" value="5" onclick="clickCallBack(this)"/>FFF
	   <input type="checkbox" name="test" value="6" onclick="clickCallBack(this)"/>GGG
	   <input type="checkbox" name="test" value="7" onclick="clickCallBack(this)"/>HHH
</body>
</html>

asialee029

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现Checkbox的互斥选中

[color=blue] [size=medium]需求其实很简单，就是实现多checkbox的互斥选中，看下面图：AAA和BBB和CCC不能同时选中，当然这个里面可以定义其他规则，CCC和EEE不能同时选中，DDD和EEE不能同时选中。同时选中的时候要进行提示，那几个冲突了，并且将冲突去掉。[/size][/color][img]http://dl.iteye.com/uplo...
复制链接

扫一扫

专栏目录