javascript实现复选框单选多选!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选、反选</title>
	</head>
	<body>
		<form>
			<input type="checkbox" name="" id="all" onclick="selectAll();" />全选<br />
			<hr /><br />
			<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单一<br /><br />
			<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单二<br /><br />
			<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单三<br /><br />
			<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单四<br /><br />
		</form>
		<script type="text/javascript" >
			var dom=document.getElementById('all');
			var doms=document.getElementsByName('chk');
			function selectAll(){
				var len = doms.length;
				for(var i=0;i<len;i++){
					if(dom.checked){
						doms[i].checked=true;
					}else{
						doms[i].checked=false;
					};
				}
			};
			function selectSingle(){
				let len = 0;
				let count = doms.length;
				for(var i=0;i<count;i++){
					if(doms[i].checked==true){
						len++;
					}
				}
				if (count == len) {
					dom.checked = true;
				}else{
					dom.checked = false;
				}
			}
		</script>
	</body>
</html>

  

posted @ 2017-08-15 11:34  7small7  阅读(1157)  评论(0编辑  收藏  举报