JavaScript 複選框的全選與取消

需求
1)當選中全選這個複選框,下面的複選框也都會被選中,取消選中時,下面的複選框都不被選中。
2)當下面的複選框都被選中時,上面的全選也會被選中。
直接上代碼吧:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
	</head>
	<script>
	function allCheck(){
		var status=document.getElementById("allcheck").checked;
		var btn=document.getElementsByName("check");
		for(var i=0;i<btn.length;i++){
			btn[i].checked=status;
		}
	}
	function check(){
		var flag=true;
		var all=document.getElementById("allcheck");
		var btn=document.getElementsByName("check");
		for(var i=0;i<btn.length;i++){
			if(btn[i].checked!=flag){
				flag=false;
				break;
			}
		}
		all.checked=flag;
	}
	</script>
	<body>
		<input type="checkbox" id="allcheck" onclick="allCheck()"/>全選/全不選<br />
		<input type="checkbox" name="check" onclick="check()"/>西瓜
		<input type="checkbox" name="check" onclick="check()"/>蘋果
		<input type="checkbox" name="check" onclick="check()"/>香蕉
	</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章