全选、不选和反选
今天我们来学习一下如何实现全选、不选和反选,首先我们来看一张收件箱的图片。
![7861972-772b2fe799db7c9b.png](https://i-blog.csdnimg.cn/blog_migrate/46d77ff49cedbc4158af55971e4b5fd6.png)
收件箱
如果只是简单的删除几封邮件,选中删除就可以了,但是如果邮箱里堆满了邮件,一个一个的选中再删除,太过于浪费精力。今天你学会了如何实现全选、不选和反选,就可以不花精力的删掉过期的邮件。接下来我们看效果图。
![7861972-2ea16291025da896.png](https://i-blog.csdnimg.cn/blog_migrate/dae26dfc1cc1e7f37ad750709577d2b3.png)
没被选中之前
![7861972-68fa76f8ca63043c.png](https://i-blog.csdnimg.cn/blog_migrate/71eb9c32cd8df5b02664478e2cd59cb8.png)
全选
![7861972-0e7ed7f23911eb4a.png](https://i-blog.csdnimg.cn/blog_migrate/80b7414e0fcfa8d2a26d2766c01fdbcc.png)
不选
![7861972-3c51a643be90545d.png](https://i-blog.csdnimg.cn/blog_migrate/d1fed8c66dd255624ed6071bc5ce6505.png)
反选前
![7861972-d62a519fab082b27.png](https://i-blog.csdnimg.cn/blog_migrate/ced0faf9d8786c8b672892b5012961be.png)
反选后
接下来我们来分析一下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选、不选和反选</title>
<script>
window.onload = function() {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oDiv = document.getElementById('div1');
var aCh = oDiv.getElementsByTagName('input');
oBtn1.onclick = function() {
for(var i = 0; i < aCh.length; i++) {
aCh[i].checked = true;
}
}
oBtn2.onclick = function() {
for(var i = 0; i < aCh.length; i++) {
aCh[i].checked = false;
}
}
oBtn3.onclick = function() {
for(var i = 0; i < aCh.length; i++) {
if(aCh[i].checked == true) {
aCh[i].checked = false;
} else {
aCh[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全选" />
<input id="btn2" type="button" value="不选" />
<input id="btn3" type="button" value="反选" /><br>
<div id="div1">
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
</div>
</body>
</html>
我们先来看一下全选的代码,之前我们学过的for循环,这里就用到了。
oBtn1.onclick = function() {
for(var i = 0; i < aCh.length; i++) {
aCh[i].checked = true;
}
}
等于true就说明将未选中的checked选中,那不选只需要等于false就可以了。
oBtn2.onclick = function() {
for(var i = 0; i < aCh.length; i++) {
aCh[i].checked = false;
}
}
至于反选就更简单了,只需做一下判断就可以,之前选中的变不选,未被选中的变可选。
oBtn3.onclick = function() {
for(var i = 0; i < aCh.length; i++) {
if(aCh[i].checked == true) {
aCh[i].checked = false;
} else {
aCh[i].checked = true;
}
}
}
好了,今天的分享就到这里。
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。
![7861972-5500a327ece1f037.jpg](https://i-blog.csdnimg.cn/blog_migrate/d54327f8f669097355be2da80ce4a798.jpeg)
小晴天.jpg