zoukankan      html  css  js  c++  java
  • 选择框、反选、全选

    <!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: greenyellow;
                opacity: 0.6;
            }
            .c2{
                 500px;
                height: 500px;
                background-color: dodgerblue;
                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="添加" onclick="show()"/>
            <input type="button" value="全选" onclick="selectall()"/>
            <input type="button" value="取消" onclick="cancleall()"/>
            <input type="button" value="反选" onclick="reverseall()"/>
            <table>
                <thead>
                    <tr>
                        <th>选择 </th>
                        <th>端口器</th>
                    </tr>
                </thead>
                <tbody id="tb">
                    <tr>
                        <td><input type="checkbox"/></td>
                        <td>567567</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"/></td>
                        <td>567567</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"/></td>
                        <td>567567</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="确定"/> </p>
            <p><input type="button" value="取消" onclick="hide()"/> </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 selectall() {
                var tbobj = document.getElementById("tb");
                var tr_list = tbobj.children;
                for (var i = 0; i < tr_list.length; i++) {
                    var trbj = tr_list[i];
                    var checkbox = trbj.children[0].children[0];
                    checkbox.checked = true
                }
            }
            function cancleall() {
                var tbobj = document.getElementById("tb");
                var tr_list = tbobj.children;
                for (var i = 0; i < tr_list.length; i++) {
                    var trbj = tr_list[i];
                    var checkbox = trbj.children[0].children[0];
                    checkbox.checked = false
                }
            }
            function reverseall() {
                var tbobj = document.getElementById("tb");
                var tr_list = tbobj.children;
                for (var i = 0; i < tr_list.length; i++) {
                    var trbj = tr_list[i];
                    var checkbox = trbj.children[0].children[0];
                    if (checkbox.checked) {
                        checkbox.checked = false
                    }
                    else
                        checkbox.checked = true
                }
            }
    
        </script>
    
    </body>
    </html>
    
  • 相关阅读:
    浅谈C#托管程序中的资源释放问题
    c#基本语法学习笔记
    深入剖析C#多态性
    Reporting Services API
    进程和线程的区别
    化妆品网站,饰品网站
    宠物销售网站
    卖地方特色才产品,类似湖南味道那样的网上专卖店
    建立友情链接联盟
    DIY最残忍U盘
  • 原文地址:https://www.cnblogs.com/qiangayz/p/8720852.html
Copyright © 2011-2022 走看看