从删除邮件小页面看flag标志位

最新推荐文章于 2024-11-24 22:46:54 发布

noobFrontEnd

最新推荐文章于 2024-11-24 22:46:54 发布

阅读量480

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 javascript 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/github_33777703/article/details/75147114

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

本文探讨了在邮件列表中实现全选功能的两种方法。一种是使用标志位进行状态切换，另一种是通过直接传参的方式。同时介绍了如何处理取消全选、反选及删除邮件等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

删除邮件要求：
选择一个或几个邮件，点击删除按钮后删除
删除邮件demo

这里重点写的是一个小问题：如何才能点击左上全选框和下面的全选按钮都让选框全部选中或不选中？

方案一

在之前不能点击取消全选的时候代码如下

<body>
    <table id="tableObj" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td><input class="bind" type="checkbox" id="checkAll" value="" />全选</td>
            <td class="column">姓名</td>
            <td class="column">邮件标题</td>
        </tr>
    <table>

    <input class="btn bind" type="button" id="selectAll" value="全选" />
</body>
<script type="text/javascript">
    var table = document.getElementById("tableObj"); //表格对象
    var checkboxs = document.getElementsByClassName("check"); //复选框
    var checkAll = document.getElementById("checkAll"); //是否全选状态框
    var selectDel = document.getElementById("selectDel"); //删除按钮
    var selectAllBtn = document.getElementById("selectAll"); //全选按钮
    var selectCancelBtn = document.getElementById("selectCancel"); //取消全选按钮
    var bind = document.getElementsByClassName("bind"); //将全选按钮绑定一起
    var selectReverBtn = document.getElementById("selectRever"); //反选按钮
    var index, i; //记录被选中的个数index 和循环变量i

        /*****************
         * 判断全选框是否选中
         ****************/
        function selectAllOrNot() {
            index = 0;
            for(i = 0; i < checkboxs.length; i++) {
                if(checkboxs[i].checked == true) {
                    index++;
                }
            }
            if(index == checkboxs.length) {
                checkAll.checked = true;
            } else {
                checkAll.checked = false;
            }
        }
        /*给两个全选按钮添加点击事件*/
        for(m = 0; m < bind.length; m++) {
            bind[m].onclick = function() {
                /*第一种方法*/
                if(checkAll.checked) {
                    for(n = 0; n < checkboxs.length; n++) {
                        checkboxs[n].checked = true;
                    }
                } else {
                    for(n = 0; n < checkboxs.length; n++) {
                        checkboxs[n].checked = false;
                    }
                }
                selectAllOrNot();
            }
        }
</script>

后来自己又想到的方法，已经很接近flag标志位判断了，但是还是只能通过点击全选复选框来达到全选的效果，此时并不能点击点击按钮全选，如果再想点击全选按钮全选的话需要把checkAll框的checked属性修改一下，肯定能实现，但是暂时自己没有思路。直接写第二个方法吧

/*第二种方法，借助标志位*/
    if(flag) {
        for(n = 0; n < checkboxs.length; n++) {
            checkboxs[n].checked = flag;
        }
        flag = false;
    } else {
        for(n = 0; n < checkboxs.length; n++) {
            checkboxs[n].checked = flag;
        }
        flag = true;
    }
    selectAllOrNot();

这种方法借助了第三方变量flag，flag值要么true要么false，
任意点击bind属性的按钮都会使复选框赋上flag的值，赋值之后flag变号，以便下一次再用。

方案二

处理全选框的选中和全选按钮的点击事件用了两种方法：全选框的点击用了this.checked属性，而按钮的点击事件利用了封装函数，直接传参true。函数如下

function selectCheckBox (flag) {
            for (var i = 0; i < checkBoxs.length; i++) {
                checkBoxs[i].checked = flag//设置是否选中
            }
        }

在判断全选状态显示框的时候，采用了有一个不满足就不再选中复选框的想法

最后附上两种方案的代码

方案一源代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>删除邮件</title>
        <style type="text/css">
            td {
                width: 70px;
            }
            td input {
                margin-left: 10px;
            }
            .column {
                width: 200px;
                height: 50px;
                text-align: center;
            }
            .flexDis {
                text-align: center;
            }
            .flexDis input {
                margin-right: 30px;
            }
        </style>
    </head>

    <body>
        <table id="tableObj" border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td><input class="bind" type="checkbox" id="checkAll" value="" />全选</td>
                <td class="column">姓名</td>
                <td class="column">邮件标题</td>
            </tr>
            <tr>
                <td><input class="check" type="checkbox" id="" value="" /></td>
                <td class="column">第1号</td>
                <td class="column">第1号作业</td>
            </tr>
            <tr>
                <td><input class="check" type="checkbox" id="" value="" /></td>
                <td class="column">第2号</td>
                <td class="column">第2号作业</td>
            </tr>
            <tr>
                <td><input class="check" type="checkbox" id="" value="" /></td>
                <td class="column">第3号</td>
                <td class="column">第3号作业</td>
            </tr>
            <tr>
                <td><input class="check" type="checkbox" id="" value="" /></td>
                <td class="column">第4号</td>
                <td class="column">第4号作业</td>
            </tr>
            <tr>
                <td><input class="check" type="checkbox" id="" value="" /></td>
                <td class="column">第5号</td>
                <td class="column">第5号作业</td>
            </tr>
            <tr>
                <td><input class="check" type="checkbox" id="" value="" /></td>
                <td class="column">第6号</td>
                <td class="column">第6号作业</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2" class="flexDis"><input class="btn bind" type="button" id="selectAll" value="全选" /><input class="btn" type="button" id="selectCancel" value="取消全选" /><input class="btn" type="button" id="selectRever" value="反选" /><input class="btn" type="button" id="selectDel" value="删除选中邮件" /></td>
            </tr>
        </table>
    </body>

    <script type="text/javascript">
        var table = document.getElementById("tableObj"); //表格对象
        var checkboxs = document.getElementsByClassName("check"); //复选框
        var checkAll = document.getElementById("checkAll"); //是否全选状态框
        var selectDel = document.getElementById("selectDel"); //删除按钮
        var selectAllBtn = document.getElementById("selectAll"); //全选按钮
        var selectCancelBtn = document.getElementById("selectCancel"); //取消全选按钮
        var bind = document.getElementsByClassName("bind"); //将全选按钮绑定一起
        var selectReverBtn = document.getElementById("selectRever"); //反选按钮
        var index, i; //记录被选中的个数index 和循环变量i
        /*********************************************
         * 以下代码是给按钮添加点击事件，并没有处理进一步的逻辑
         ********************************************/
        /*****************
         * 判断全选框是否选中
         ****************/
        function selectAllOrNot() {
            index = 0;
            for(i = 0; i < checkboxs.length; i++) {
                if(checkboxs[i].checked == true) {
                    index++;
                }
            }
            if(index == checkboxs.length) {
                checkAll.checked = true;
            } else {
                checkAll.checked = false;
            }
        }
        /***********************************************************************
         * 给全选状态显示框和全选按钮添加点击事件，使其可以点击一次全选中，再点一次全部不选中*
         * *********************************************************************/
        var flag = true;
        for(m = 0; m < bind.length; m++) {
            bind[m].onclick = function() {
                /*第二种方法，借助标志位*/
                if(flag) {
                    for(n = 0; n < checkboxs.length; n++) {
                        checkboxs[n].checked = flag;
                    }
                    flag = false;
                } else {
                    for(n = 0; n < checkboxs.length; n++) {
                        checkboxs[n].checked = flag;
                    }
                    flag = true;
                }
                selectAllOrNot();
            }
        }


        /*给反选按钮添加点击事件*/
        selectReverBtn.onclick = function() {
            for(i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = !checkboxs[i].checked;
            }
            selectAllOrNot();
        }
        /*给取消全选按钮添加点击事件*/
        selectCancelBtn.onclick = function() {
            for(i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = false;
            }
            selectAllOrNot();
        }
        /*给复选框添加点击事件*/
        for(i = 0; i < checkboxs.length; i++) {
            checkboxs[i].onclick = function() {
                selectAllOrNot();
            }
        }
        /******************************************
         * ******以下代码是处理删除邮件这一行为的逻辑****
         * 想法是利用复选框的checked属性判断是否要删除节点
         *****************************************/
        selectDel.onclick = function() {
            for(i = 0; i < checkboxs.length; i++) {
                if(checkboxs[i].checked == true) {
                    table.firstElementChild.removeChild(checkboxs[i].parentNode.parentNode);
                    i--;
                }
            }
        }
    </script>

</html>

方案二源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">
            <!--表头-->
            <tr>
                <th><input type="checkbox" />全选</th>
                <th>发件人</th>
                <th>邮件内容</th>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>张三</td>
                <td>作业邮件1</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>李四</td>
                <td>作业邮件2</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>王五</td>
                <td>作业邮件3</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>赵六</td>
                <td>作业邮件4</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>马七</td>
                <td>作业邮件5</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>周八</td>
                <td>作业邮件6</td>
            </tr>
            <!--最后一行-->
            <tr>
                <td><input type="checkbox" />全选</td>
                <td colspan="2">
                    <input type="button" id="" value="全选" />
                    <input type="button" id="" value="取消全选" />
                    <input type="button" id="" value="反选" />
                    <input type="button" id="" value="删除所选邮件" />
                </td>
            </tr>
        </table>
    </body>
    <script type="text/javascript">
        /*********************************
         * ***********获取所有对象**********
         ********************************/
        var checkBoxs = document.querySelectorAll("input[type=checkbox]");//获取所有的checkbox单选框
        var buttons = document.querySelectorAll("input[type=button]");//获取所有的按钮按钮
        var tableObj = document.getElementsByTagName("table")[0];

        /*************************************
         * 封装一个函数，功能是处理所有单选框是否选中
         * **********************************/
        function selectCheckBox (flag) {
            for (var i = 0; i < checkBoxs.length; i++) {
                checkBoxs[i].checked = flag//设置是否选中
            }
        }
        /*假如有一个复选框没选中，第一个和最后一个全选显示框就不选中*/
        for (var i = 0; i < checkBoxs.length; i++) {
            if (checkBoxs[i].checked == false) {
                checkBoxs[0] = false;
                checkBoxs[checkBoxs.length] = false
            }
        }
        /**************
         * 处理全选框功能
         * ***********/
        checkBoxs[0].onclick = function () {
            /*效果也是想点一下选中，再点一下不选中，这个时候单独传入一个布尔值已经不满足了，要传入变量，因为点击框后this.checked的属性值会立即发生改变，所以可以用this.checked来判断*/
            selectCheckBox(this.checked);
        }
        /**************
         * 全选按钮的功能
         * ***********/
        buttons[0].onclick = function () {
            selectCheckBox(true);
        }
        /*****************
         * 取消全选按钮的功能
         ****************/
        buttons[1].onclick = function () {
            selectCheckBox(false);
        }
        /*****************
         * 反选按钮的功能
         ****************/
        buttons[2].onclick = function  () {
            var bol = true;
            for (var i = 1; i < checkBoxs.length - 1; i++) {//看到这一行要注意循环控制条件
                checkBoxs[i].checked = !checkBoxs[i].checked;
                /*如果单选框有未选中状态，则改变bol状态*/
                if (checkBoxs[i].checked == false) {
                    bol = false;
                }
            }
            /*方法一开始*/
            if (bol) {
                checkBoxs[0].checked = true;
                checkBoxs[checkBoxs.length - 1].checked = true;
            } else {
                checkBoxs[0].checked = false;
                checkBoxs[checkBoxs.length - 1].checked = false;
            }
            /*方法一结束*/
            /*方法二开始*/
//          checkBoxs[0].checked = bol;
//          checkBoxs[checkBoxs.length - 1].checked = bol;
            /*方法二结束*/
            /*----------------------------------------------------*/
        }
        /************
         * 删除按钮功能
         ***********/
        buttons[3].onclick = function () {
            checkBoxs = document.querySelectorAll("input[type=checkbox]");//每次点击后重新获取最新的数组元素（注：只有querySelectorAll中用）
            console.log(tableObj.firstElementChild);
            for (var i = 0; i < checkBoxs.length; i++) {
                if (checkBoxs[i].checked) {
                    /*删除选中框所在的邮件*/
                    tableObj.firstElementChild.removeChild(checkBoxs[i].parentElement.parentElement);
                }
            }
        }
    </script>
</html>