原生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>

上一篇:高可用集群(crmsh详解)http://www.it165.net/admin/html/201404/2869.html


下一篇:net core体系-web应用程序-1VS2017构建一个简单的web