用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
position: fixed;
top: ;
right: ;
left: ;
bottom: ;
background-color: black;
opacity: 0.5;
z-index: ;
} .c2 {
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: %;
top: %;
margin-left: -250px;
margin-top: -200px;
z-index: ;
} .c3 {
display: none;
} </style>
</head>
<body style="margin: 0 auto"> <div> <input type="button" value="添加" onclick="add()">
<input type="button" value="全选" onclick="ChooseAll()">
<input type="button" value="取消" onclick="CancleAll()">
<input type="button" value="反选" onclick="ReverseAll()">
<table>
<thead>
<tr>
<th>请选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">

<tr>
<td><input type="checkbox"></td>
<td>192.168.99.1</td>
<td></td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>192.168.99.2</td>
<td></td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>192.168.99.3</td>
<td></td>
</tr>
</tbody>
</table>
</div>

<div id="i1" class="c1 c3"> </div>
  <div id="i2" class="c2 c3">
<p>
<input name="ip" type="text">
<input name="duankou" type="text">
</p>
<p>
<input type="button" value="确定" onclick="go()">
<input type="button" value="取消" onclick="goback()">
</p>
</div>
 <script>
function add() {
document.getElementById('i1').classList.remove('c3')
document.getElementById('i2').classList.remove('c3')
} function goback() {
document.getElementById('i1').classList.add('c3')
document.getElementById('i2').classList.add('c3')
} function go() {
var v1 = document.getElementById('i2').valueOf('ip').alert(v1)
} //全选
function ChooseAll() {
var tbody = document.getElementById('tb')//根据ID找到tbody
var tr_list = tbody.children //获取子标签，并生成列表
for (i = ; i < tr_list.length; i++) { //循环tr_list得到每一个tr
var current_tr = tr_list[i]; //拿到拿到每个td的子标签，也就是里面的所有的tr生成一个列表
var checkbox = current_tr.children[].children[];//得到第一个tr里的第一个子标签也就是CheckBox了
checkbox.checked = true; //checkbox.checked是获取当前CheckBox的值是true还是false
// 当然此时肯定是false，我们只需要让他等于true就可以修改他的当前状态为打上对勾的了
}
} //取消
function CancleAll() {
var tbody = document.getElementById('tb')//根据ID找到tbody
var tr_list = tbody.children //获取子标签，并生成列表
for (i = ; i < tr_list.length; i++) { //循环tr_list得到每一个tr
var current_tr = tr_list[i]; //拿到拿到每个td的子标签，也就是里面的所有的tr生成一个列表
var checkbox = current_tr.children[].children[];//得到第一个tr里的第一个子标签也就是CheckBox了
checkbox.checked = false; //checkbox.checked是获取当前CheckBox的值是true还是false
// 当然此时肯定是false，我们只需要让他等于false就可以修改他的当前状态为去掉对勾了
} } //反选
function ReverseAll() {
var tbody = document.getElementById('tb')//根据ID找到tbody
var tr_list = tbody.children //获取子标签，并生成列表
for (i = ; i < tr_list.length; i++) { //循环tr_list得到每一个tr
var current_tr = tr_list[i]; //拿到拿到每个td的子标签，也就是里面的所有的tr生成一个列表
var checkbox = current_tr.children[].children[];//得到第一个tr里的第一个子标签也就是CheckBox了
var type = checkbox.checked; //checkbox.checked是获取当前CheckBox的值是true还是false
if (type == true) { //然后对当前状态进行判断；如果是true就将他改成false
// 如果是false就将他改成true;即可将他反选
checkbox.checked = false;
}
else {
checkbox.checked = true;
}
}
} </script> </body>
</html>