checkbox全选和反选以及取消

最新推荐文章于 2024-06-07 22:01:55 发布

73、

最新推荐文章于 2024-06-07 22:01:55 发布

阅读量389

点赞数 1

分类专栏： # 前端实例文章标签： checkbox全选全不选反选

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103546263

版权

前端实例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

很多网站页面上面经常可以看到，在每一条记录的前面会有一个一个选择框，下面这个例子实现了一键完成全选，一键完成反选，一键完成取消。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .hide{
                    display: none;
                }
                .c1{
                    position:fixed;
                    left: 0;
                    top:0;
                    right:0;
                    bottom:0;
                    background-color:black;
                    opacity:0.6;
                    z-index:9;
                }
                .c2{
                    width:500px;
                    height:400px;
                    background-color:white;
                    position: fixed;
                    left: 50%;
                    top:50%;
                    margin-left:-250px;
                    margin-top:-200px;
                    z-index:10;
                }
            </style>
        </head>
        <body style="margin: 0;">
            <div>
                <input type="button" value="添加" οnclick="show();"/>
                <input type="button" value="全选" οnclick="chooseAll();"/>
                <input type="button" value="取消" οnclick="cancelAll();"/>
                <input type="button" value="反选" οnclick="reverseAll();"/>
                <table>
                    <thread>
                        <tr>
                            <th>选择</th>
                            <th>主机名</th>
                            <th>端口</th>
                        </tr>
                    </thread>
                    <tbody id='tb'>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td>1.1.1.1</td>
                            <td>90</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td>1.1.1.2</td>
                            <td>91</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td>1.1.1.3</td>
                            <td>92</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!--遮罩层开始-->
            <div id='i1' class='c1 hide'></div>
            <!--遮罩层结束-->

            <!--弹出框开始-->
            <div id='i2' class="c2 hide">
                <p><input type="text" /></p>
                <p><input type="text" /></p>
                <p>
                    <input type="button" value="cancel" οnclick="hide();"/>
                    <input type="button" value="sure"/>
                </p>
            </div>
            <!--弹出框结束-->

            <script>
                function show(){
                    document.getElementById('i1').classList.remove('hide');
                    document.getElementById('i2').classList.remove('hide');
                }

                function hide(){
                    document.getElementById('i1').classList.add('hide');
                    document.getElementById('i2').classList.add('hide');
                }
                function chooseAll(){
                    var tbody = document.getElementById('tb');
                    //获取所有的tr
                    var tr_list = tbody.children;
                    //循环所有的tr
                    for(var i=0; i<tr_list.length; i++){
                        var current_tr = tr_list[i];
                        var checkbox = current_tr.children[0].children[0];
                        checkbox.checked = true;
                    }
                }
                function cancelAll(){
                    var tbody = document.getElementById('tb');
                    //获取所有的tr
                    var tr_list = tbody.children;
                    //循环所有的tr
                    for(var i=0; i<tr_list.length; i++){
                        var current_tr = tr_list[i];
                        var checkbox = current_tr.children[0].children[0];
                        checkbox.checked = false;
                    }
                }
                function reverseAll(){
                    var tbody = document.getElementById('tb');
                    //获取所有的tr
                    var tr_list = tbody.children;
                    //循环所有的tr
                    for(var i=0; i<tr_list.length; i++){
                        var current_tr = tr_list[i];
                        var checkbox = current_tr.children[0].children[0];
                        if(checkbox.checked){
                            checkbox.checked = false;
                        }else{
                            checkbox.checked = true;
                        }
                    }
                }
            </script>
        </body>
    </html>

在这里插入图片描述

73、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox全选和反选以及取消

很多网站页面上面经常可以看到，在每一条记录的前面会有一个一个选择框，下面这个例子实现了一键完成全选，一键完成反选，一键完成取消。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
复制链接

扫一扫

专栏目录