zoukankan      html  css  js  c++  java
  • 实现复选框的多选功能

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>管理员列表</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            table{
                 500px;
                margin:auto;
                border-collapse: collapse;
            }
            th,td{
                text-align: center;
                border:1px solid #000;
            }
            h1{
                text-align: center;
                margin:100px 0 20px 0;
            }
        </style>
    
    </head>
    <body>
    
    <h1>管理员列表</h1>
    
    <table id="data">
        <thead>
            <tr>
                <th>
                    <input name="choose" type="checkbox" class="checked" value="全选" onclick="selectAll(this)">
                </th>
                <th>管理员ID</th>
                <th>姓名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input name="choose" type="checkbox"></td>
            <td>1</td>
            <td>Tester</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td><input name="choose" type="checkbox"></td>
            <td>2</td>
            <td>Manager</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td><input name="choose" type="checkbox"></td>
            <td>3</td>
            <td>Analyst</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td><input name="choose" type="checkbox"></td>
            <td>4</td>
            <td>Admin</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    
    <script>
    //    全选或者取消全选
        function selectAll(chb) {
    //        获得id为data的table下tbody下的tr下的第一个td中的input,保存在变量chbs中
            var data=document.getElementById("data");
            chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
    
    //        遍历chbs中的每一个chb
            for(var i=0;i<chbs.length;i++){
    //            设置当前chb的checked等于chb的checked
                chbs[i].checked=chb.checked;
            }
        }
        window.onload=function () {
    //        获得id为data的table下tbody下的tr下的第一个td中的input,保存在变量chbs中
            var data=document.getElementById("data");
            chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
    //        遍历chbs中的每一个chb
            for(var i=0;i<chbs.length;i++){
    //            设置当前chb的onclick=selectOne;
                chbs[i].onclick=selectOne;
    
            }
        }
        function selectOne() {//选中或取消选中一个chb
    //        this-->当前选中的chb
    //        获得data下thead下的第一个th下的input,保存在变量selAll中
            var selAll=data.querySelector("thead>tr>th:first-child>input");
    //        如果当前chb的checked是false
            if(this.checked==false){
    //            将selAll的checked改为false
                selAll.checked=false;
            }else {//否则
    //            获得id为data下的tbody下tr下的第一个td中的input,保存在变量chbs中
                var chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
                for(var i=0;i<chbs.length;i++){//遍历chbs下每个chb
    //                如果当前chb没有被选中,则直接返回
                    if(chbs[i].checked==false){return}
                }//遍历结束
    //            将selAll的checked改为true
                selAll.checked=true;
            }
        }
    
    </script>
    </body>
    </html>
    
  • 相关阅读:
    修改MySQL密码
    struts入门
    监听
    游戏外挂教程(转)
    “无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性 “之解决
    C# PropertyGrid控件应用心得
    登录时的"记住我"
    自动登录、记住我(保存登陆状态)实现
    UpdatePanel的使用方法
    asp.net中使用基于角色role的Forms验证
  • 原文地址:https://www.cnblogs.com/yingleiming/p/7815583.html
Copyright © 2011-2022 走看看