1.示例图：
2.代码
- HTML+css
<body>
<input id = "btn1" type="button" value = "全选"> <br>
<input id = "btn2" type="button" value = "取消"> <br>
<input id = "btn3" type="button" value = "反选"> <br>
<div id = "div1">
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
</div>
</body>
- js
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oDiv = document.getElementById('div1');
var aCh = oDiv.getElementsByTagName('input');
//全选
oBtn1.onclick = function (){
for(var i = 0; i < aCh.length; i++){
aCh[i].checked = true;
}
}
//取消
oBtn2.onclick = function (){
for(var i = 0; i < aCh.length; i++){
aCh[i].checked = false;
}
}
//反选
oBtn3.onclick = function (){
for(var i = 0; i < aCh.length; i++){
if( aCh[i].checked == true)
aCh[i].checked = false;
else
aCh[i].checked = true;
}
}
}
</script>