zoukankan      html  css  js  c++  java
  • JS——全选与全不选

    1、每个子input标签都需要进行判断

    2、使用开闭原则,一旦满足条件就改变默认值

    3、在给主input标签注册事件时,要求主input标签的checked值赋值给子标签

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .wrap {
                 300px;
                margin: 100px auto 0;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
                 300px;
            }
    
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
    
            th {
                background-color: #09c;
                font: bold 16px "微软雅黑";
                color: #fff;
            }
    
            td {
                font: 14px "微软雅黑";
            }
    
            tbody tr {
                background-color: #f0f0f0;
            }
    
                tbody tr:hover {
                    cursor: pointer;
                    background-color: #fafafa;
                }
        </style>
    </head>
    <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>
        <script>
            var inp = document.getElementById("theadInp");
            var tbody = document.getElementById("tbody");
            var inps = tbody.getElementsByTagName("input");
            //给表头的input标签注册事件
            inp.onclick = function () {
                for (var i = 0; i < inps.length; i++) {
                    inps[i].checked = this.checked;
                }
            }
            //给tbody中的input标签注册事件
            for (var i = 0; i < inps.length; i++) {
                inps[i].onclick = function () {
                    var bool = true;
                    for (var i = 0; i < inps.length; i++) {
                        if (inps[i].checked === false) {
                            bool = false;
                        }
                    }
                    inp.checked = bool;
                }
            }
        </script>
    </body>
    </html>

  • 相关阅读:
    MUI DtPicker 显示自定义日期
    Windows10更新后,远程桌面无法登录服务器 提示远程桌面协议 CredSSP 出现漏洞
    微信Access Token 缓存方法
    在Windows7/8/10上,安装IIS
    启明星系统微信接口配置
    c#使用QQ邮箱的SSL收发邮件
    使用ASP.NET+Jquery DataTables的服务器分页
    总是容易忘记:enum、int、string之间的快速转换
    Chrome浏览器导出pdf时,隐藏链接HREF
    SQL Builder 1.04
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/7874699.html
Copyright © 2011-2022 走看看