<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
ul{margin: 100px auto; width: 200px;}
li{list-style: none;}
label{cursor: pointer;}
</style>
<script type="text/javascript">
window.onload = function(){
var oAll = document.getElementById('all');
var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input');
var oN = document.getElementById('allNo');
var oFan = document.getElementById('fan');
oAll.onclick = function(){
for (var i = 0; i < aInput.length; i++) {
aInput[i].checked = true;
}
}
oN.onclick = function(){
for (var i = 0; i < aInput.length; i++) {
aInput[i].checked = false;
}
}
oFan.onclick = function(){
for (var i = 0; i < aInput.length; i++) {
if(aInput[i].checked == true){
aInput[i].checked = false;
}else{
aInput[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<ul>
<label id="all" for="">
<span>全選</span>
</label><br />
<label for="" id="allNo">
<span>全不选</span>
</label><br />
<label for="" id="fan">
<span>反选</span>
</label>
<div id="div1">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" />
</div>
</ul>
</body>
</html>
