js练习之正反选

题目:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">

<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>

</table>
<br>
<button onclick="selectAll()">全选</button>
<button onclick="invertSelection()">反选</button>
<button onclick="cancel()">取消</button>


<script>
var inputs=document.getElementsByTagName("input");
//全选
function selectAll() {
for (var i in inputs){
var input=inputs[i];
//input.checked=true时默认选中
input.checked=true;
}
}
//取消
function cancel() {
for (var i in inputs){
var input=inputs[i];
//input.checked=true时默认未选中
input.checked=false;
}
}
//反选
function invertSelection() {
for (var i in inputs){
var input=inputs[i];
if (input.checked){
input.checked=false;
}
else {
input.checked=true;
}
}
}

</script>
</body>
</html>
原文地址:https://www.cnblogs.com/hhqdsj/p/13285976.html