<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<table border="1px">
<tr>
<th>ID</th>
<th>IP</th>
<th>Port</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>192.168.1.1</td>
<td>3306</td>
<td><input type="checkbox" class="chk"></td>
</tr>
<tr>
<td>2</td>
<td>192.168.2.1</td>
<td>3307</td>
<td><input type="checkbox" class="chk"></td>
</tr>
<tr>
<td>3</td>
<td>192.168.21.1</td>
<td>3369</td>
<td><input type="checkbox" class="chk"></td>
</tr>
</table>
<script>
function selectAll() {
var inpts = document.getElementsByClassName('chk');
for (var i = 0; i < inpts.length; i=i+1) {
inpts[i].checked = true;
}
};
function cancelAll() {
var inpts = document.getElementsByClassName('chk');
for (var i = 0; i < inpts.length; i++) {
inpts[i].checked = false;
}
};
function reverseAll() {
var inpts = document.getElementsByClassName('chk');
for (var i = 0; i < inpts.length; i++) {
if (inpts[i].checked) {
inputs[i].checked = false;
}else {
inpts[i].checked = true;
}
}
}