zoukankan      html  css  js  c++  java
  • 原生js中实现全选和反选功能

        <!DOCTYPE html>  
        <html>  
        <head lang="en">  
            <meta charset="UTF-8">  
            <title></title>  
            <style type="text/css">  
          
            </style>  
        </head>  
        <body>  
            <table border="1">  
                <tr>  
                    <th><input type="checkbox" class="choose-all-input" onclick="clickChooseAllInput()" /></th>  
                    <th>学号</th>  
                    <th>姓名</th>  
                    <th>班级</th>  
                </tr>  
                <tr>  
                    <td><input type="checkbox" class="choose-single" /></td>  
                    <td>001</td>  
                    <td>张三</td>  
                    <td>李四</td>  
                </tr>  
                 <tr>  
                    <td><input type="checkbox" class="choose-single" /></td>  
                    <td>002</td>  
                    <td>张三</td>  
                    <td>李四</td>  
                </tr>  
                 <tr>  
                    <td><input type="checkbox" class="choose-single" /></td>  
                    <td>003</td>  
                    <td>张三</td>  
                    <td>李四</td>  
                </tr>  
                 <tr>  
                    <td><input type="checkbox" class="choose-single" /></td>  
                    <td>004</td>  
                    <td>张三</td>  
                    <td>李四</td>  
                </tr>   <tr>  
                    <td><input type="checkbox" class="choose-single" /></td>  
                    <td>005</td>  
                    <td>张三</td>  
                    <td>李四</td>  
                </tr>  
                <tr>  
                    <td><input type="checkbox" class="choose-single" /></td>  
                    <td>002</td>  
                    <td>F20</td>  
                    <td>F20</td>  
                </tr>  
            </table>  
            <button onclick="clickChooseAllBtn()">全选</button>  
            <button onclick="clickChooseReverse()">反选</button>  
        </body>  
        <script type="text/javascript">  
            var chooseAllInputEle = document.getElementsByClassName("choose-all-input")[0];  
            var chooseSingleEles = document.getElementsByClassName("choose-single");  
            function clickChooseAllInput() {  
                if (chooseAllInputEle.checked) {  
                    choose("selected");  
                } else {  
                    choose("");  
                }  
            }  
            function clickChooseAllBtn() {  
                chooseAllInputEle.checked = "checked";  
                choose("selected");  
            }  
            function choose(status) {  
                for (var i = 0; i < chooseSingleEles.length; i++) {  
                    chooseSingleEles[i].checked = status;  
                }  
            }  
          
            function clickChooseReverse() {  
                for (var i = 0; i < chooseSingleEles.length; i++) {  
                    if (chooseSingleEles[i].checked) {  
                        chooseSingleEles[i].checked = "";  
                    } else {  
                        chooseSingleEles[i].checked = "checked";  
                    }  
                }  
            }  
          
        </script>  
        </html> 

  • 相关阅读:
    Asp.Net服务器Cassini
    Vista系统Administrator帐户的激活与禁用
    SqlServer中的Top * With Ties
    SqlServer建远程服务连接
    SqlServer2005安装成功后补加Sa用户
    列出某个表中所有的列名
    水晶报表周期性打开报表失败
    Asp.net中文cookie的乱码问题
    HTML数据库编程、JavaScript数据库编程
    试图索引的限制
  • 原文地址:https://www.cnblogs.com/huangshikun/p/7097857.html
Copyright © 2011-2022 走看看