html全选反选功能

最新推荐文章于 2024-04-17 09:12:12 发布

buyuedaren

最新推荐文章于 2024-04-17 09:12:12 发布

阅读量6.9k

点赞数 2

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/buyuedaren/article/details/78235661

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先构建HTML页面:

body:

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="theadInp" />
            </th>
            <th>英雄名</th>
            <th>国籍</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>拉克丝</td>
            <td>德玛西亚</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>德莱文</td>
            <td>诺克萨斯</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>蒙多</td>
            <td>祖安</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>艾希</td>
            <td>弗雷尔卓德</td>
        </tr>
        </tbody>
    </table>
</div>

</body>

head:

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font-size: 16px ;
            color: #fff;
        }

        td {
            font-size: 14px;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

实现的效果
这里写图片描述

接下来实现全选功能:

当最上面的蓝色行的复选框被选中
下面的复选框也都要被选中

这里写图片描述

反之亦然

下面实现功能:

点击上面的的input，下面全选或者反选。
获取了上面的input按钮，只需要判断，checked属性是true还是false，
如果是true，下面的全部变成true；false同理。

 <script>
        window.onload = function () {
            var topInp = document.getElementById("theadInp");
            var tbody = document.getElementById("tbody");
            var botInpArr = tbody.getElementsByTagName("input");

    //绑定事件
            topInp.onclick = function () {
   //优化版（被点击的input按钮的checked属性值，直接作为下面的所有的input按钮的checked属性值）
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].checked = this.checked;
                }
            }

点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
checked属性值是否全部都是true，如果有一个是false，
那么上面的input的checked属性也是false;
都是true，topInp的checked就是true；

            for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () {
                    //定义一个标识是true还是false的变量
                    //默认它为true
                    var bool = true;
                    //检测每一个input的checked属性值。
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked == false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }

    </script>

这样就实现了多选和反选的功能.

buyuedaren

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html全选反选功能

首先构建HTML页面:body:<body><div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" /> </th> <th>英雄名</th>
复制链接

扫一扫