全选、不选和反选

最新推荐文章于 2022-05-03 10:43:06 发布

sunny_Destiny

最新推荐文章于 2022-05-03 10:43:06 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492846

版权

全选、不选和反选

今天我们来学习一下如何实现全选、不选和反选，首先我们来看一张收件箱的图片。

收件箱

如果只是简单的删除几封邮件，选中删除就可以了，但是如果邮箱里堆满了邮件，一个一个的选中再删除，太过于浪费精力。今天你学会了如何实现全选、不选和反选，就可以不花精力的删掉过期的邮件。接下来我们看效果图。

没被选中之前

全选

不选

反选前

反选后

接下来我们来分析一下代码。

<!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;
                        }
                    }
                }

好了，今天的分享就到这里。
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天.jpg

sunny_Destiny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选、不选和反选

全选、不选和反选今天我们来学习一下如何实现全选、不选和反选，首先我们来看一张收件箱的图片。收件箱如果只是简单的删除几封邮件，选中删除就可以了，但是如果邮箱里堆满了邮件，一个一个的选中再删除，太过于浪费精力。今天你学会了如何实现全选、不选和反选，就可以不花精力的删掉过期的邮件。接下来我们看效果图。没被选中之前全选不选...
复制链接

扫一扫