摘要:今天看了滅絕老師的課程,通過(guò)老師講的全選,我推測(cè)出了反選和取消選擇,下面是代碼的實(shí)現(xiàn)<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>全選/反選</titl
今天看了滅絕老師的課程,通過(guò)老師講的全選,我推測(cè)出了反選和取消選擇,下面是代碼的實(shí)現(xiàn)
<!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[]'); //獲取選項(xiàng)框
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>選項(xiàng)1</label><br></li>
<li><input type="checkbox" name="item[]"><label>選項(xiàng)2</label><br></li>
<li><input type="checkbox" name="item[]"><label>選項(xiàng)3</label><br></li>
<li><input type="checkbox" name="item[]"><label>選項(xiàng)4</label><br></li>
<li><input type="checkbox" name="item[]"><label>選項(xiàng)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/
批改老師:天蓬老師批改時(shí)間:2019-01-17 09:07:16
老師總結(jié):checkbox中的每個(gè)name必須一致, 才能編成一組, 它和radio不一樣, 他是一個(gè)多選項(xiàng),會(huì)返回這個(gè)組中的多個(gè)有checked屬性的值,這個(gè)要注意