<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选反选取消</title>
<script>
window.onload = function () {
var aBtns = document.getElementsByClassName('btn');
var aIpts = document.getElementsByTagName('input');
for (var i=0;i<aBtns.length;i++){
aBtns[i].onclick = function () {
if(this.innerHTML=='全选'){
for (var j=0;j<aIpts.length;j++){
aIpts[j].checked='checked'
}
}else if (this.innerHTML=='反选'){
for (var k=0;k<aIpts.length;k++){
//alert(aIpts[k].checked);
if(aIpts[k].checked){
aIpts[k].checked=''
}else{
aIpts[k].checked='checked'
}
}
}else {
for (var m=0;m<aIpts.length;m++){
aIpts[m].checked=''
}
}
}
}
}
</script>
</head>
<body>
<button id="selectAll" class="btn">全选</button>
<button id="reversePartial" class="btn">反选</button>
<button id="cancelSelect" class="btn">取消</button>
<br>
<hr>
<table border="1" style="border-collapse: collapse">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
</table>
</body>
</html>
根据button的文本进行判断处理,获取input标签进行处理