Dom的全選和反選
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>example01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GBK">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div>
<input type="checkbox" name="qx" id="qx"/>全選/全不選
<input type="checkbox" name="qbx" id="fx"/>反選
<div id="spr">
你喜歡的小品和歌曲是誰？<br/>
<hr color="red"/>
<input type="checkbox" name="fav" value="荊軻刺秦">荊軻刺秦
<input type="checkbox" name="fav" value="面試">面試
<input type="checkbox" name="fav" value="穿越">穿越
<input type="checkbox" name="fav" value="因爲愛情">因爲愛情
</div>
<br/>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var qxNode = get("qx");
var fxNode = get("fx");
var inputNodes = get("spr").getElementsByTagName("input");
//全選的功能
qxNode.onclick = function(){
if (this.checked) {
for (var i = 0; i < inputNodes.length; i++) {
inputNodes[i].checked = "checked";
}
}
else {
for (var i = 0; i < inputNodes.length; i++) {
inputNodes[i].checked = null;
}
}
}
//反選的功能
fxNode.onclick = function(){
for (var i = 0; i < inputNodes.length; i++) {
if (inputNodes[i].checked) {
inputNodes[i].checked = null;
}
else {
inputNodes[i].checked = "checked";
}
}
}
}
function get(id){
return document.getElementById(id);
}
</script>