html如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<link rel="stylesheet" href="demo.css" type = "text/css"/>
<script type="text/javascript" src = "demo.js"></script>
</head>
<body >
全选<input type="checkbox" name="" id="selectall" onclick = "secAll()"/>
反选<input type="checkbox" name="" id="unselectall" onclick = "unsec()" />
<hr/>
<input type="checkbox" name="box" id="s1" onclick = "sec()"/>
<input type="checkbox" name="box" id="s2" onclick = "sec()"/>
<input type="checkbox" name="box" id="s3" onclick = "sec()"/>
<input type="checkbox" name="box" id="s4" onclick = "sec()"/>
<input type="checkbox" name="box" id="s5" onclick = "sec()"/>
<input type="checkbox" name="box" id="s6" onclick = "sec()"/>
<input type="checkbox" name="box" id="s7" onclick = "sec()"/>
</body>
</html>
js如下:
function secAll(){
var fabox = document.getElementById("selectall");
var boxArr = document.getElementsByName("box");
if(fabox.checked){
for(var i = 0;i<boxArr.length;i++){
boxArr[i].checked=true;
}
}else{
for(var i = 0;i<boxArr.length;i++){
boxArr[i].checked=false;
}
}
}
function unsec(){
var unsec = document.getElementById("unselectall");
var boxArr = document.getElementsByName("box");
if(unsec.checked){
for(var i = 0;i < boxArr.length;i++){
if(boxArr[i].checked){
boxArr[i].checked=false;
}else{
boxArr[i].checked=true;
}
}
}else{
for(var i = 0;i < boxArr.length;i++){
if(boxArr[i].checked){
boxArr[i].checked=false;
}else{
boxArr[i].checked=true;
}
}
}
}
function sec(){
var unsec = document.getElementById("unselectall");
var fabox = document.getElementById("selectall");
var boxArr = document.getElementsByName("box");
fabox.checked=false;
unsec.checked=false;
}