abstract：今天看了灭绝老师的课程，通过老师讲的全选，我推测出了反选和取消选择，下面是代码的实现<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>全选/反选</titl
今天看了灭绝老师的课程，通过老师讲的全选，我推测出了反选和取消选择，下面是代码的实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选/反选</title>
<style>
.box{
width: 200px;
height: 300px;
border: 2px dashed #8eb9f0;
border-radius: 20px;
padding: 40px 20px;
margin: 50px auto;
}
li{
height: 40px;
list-style: none;
border-bottom: 2px dashed #8eb9f0;
position: relative;
left: -20px;
line-height: 40px;
}
button{
padding: 10px auto;
}
</style>
<script>
var item = document.getElementsByName('item[]'); //获取选项框
function checkAll() {
for (var i = 0; i < item.length; i++) {
if (true){
item[i].checked = true;
}
}
}
function cancel() {
for (var i = 0; i < item.length; i++) {
if (true) {
item[i].checked = false;
}
}
}
function selectInvert() {
for (var i = 0; i < item.length; i++) {
if (true) {
if (item[i].checked) {
item[i].checked = false;
} else {
item[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li><input type="checkbox" name="item[]"><label>选项1</label><br></li>
<li><input type="checkbox" name="item[]"><label>选项2</label><br></li>
<li><input type="checkbox" name="item[]"><label>选项3</label><br></li>
<li><input type="checkbox" name="item[]"><label>选项4</label><br></li>
<li><input type="checkbox" name="item[]"><label>选项5</label><br></li>
</ul>
<button onclick="checkAll()" id="checkall">全选</button>
<button onclick="selectInvert()">反选</button>
<button onclick="cancel()">取消选择</button>
</div>
</body>
</html>
演示地址 -> http://47.107.64.136/JS/5/
Correcting teacher：天蓬老师Correction time：2019-01-17 09:07:16
Teacher's summary：checkbox中的每个name必须一致, 才能编成一组, 它和radio不一样, 他是一个多选项,会返回这个组中的多个有checked属性的值,这个要注意