JavaScript 操作复选框

.

.

.

.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>复选框</title>
<script type="text/javascript" >
	//设置复选框状态与最上面的复选框状态相同
	function SetChecked(){
		var chks = document.getElementsByName("chkBox");
		for(var i = 0; i < chks.length; i++){
			chks[i].checked = chkAll.checked;
		}
	}
	//设置复选框为全选或全不选状态
	function SetChkStaty(state){
		var chks = document.getElementsByName("chkBox");
		for(var i = 0; i < chks.length; i++){
			chks[i].checked = state;
		}
	}
	//反选
	function SetAntiChk(){
		var chks = document.getElementsByName("chkBox");
		for(var i = 0; i < chks.length; i++){
			chks[i].checked = !chks[i].checked;
		}
	}
</script>
</head>

<body>
<p><input id="chkAll" type="checkbox" onclick="SetChecked()" /></p>
<hr>
<p>
<input name="chkBox" type="checkbox" />
<input name="chkBox" type="checkbox" />
<input name="chkBox" type="checkbox" />
<input name="chkBox" type="checkbox" />
<input name="chkBox" type="checkbox" />
<input name="chkBox" type="checkbox" />
<input name="chkBox" type="checkbox" />
<input name="chkBox" type="checkbox" />
</p>
<p>
	<input id="btnChkAll" type="button" onclick="SetChkStaty(true)" value="全选" />  
	<input id="btnCanAll" type="button" onclick="SetChkStaty(false)" value="全不选" />
	<a href="javascript:SetAntiChk()" >反选</a>
</p>
</body>
</html>

posted on 2011-05-24 12:04  0xCAFEBABE  阅读(530)  评论(0)    收藏  举报

导航