`

实现Checkbox的互斥选中

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



不说了，直接上代码，效果图如上，欢迎大家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>


  • 大小: 27.3 KB
0
顶
0
踩
分享到：
| 西安交通大学的错误日志
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics