实现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>