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> 

  • 相关阅读:
    091122杂记
    20100304我的碎碎念
    写给自己
    开始学习AGG
    找两个数组中的相同元素
    要多写代码了
    [翻译] AGG Reference 之 Basic Renderers(基础渲染器)
    在博客园日志中显示数学公式(旧,ASCIIMathML.js版说明)
    091128日志(博客园博客显示数学公式的方法!)
    与临时对象的斗争(上)
  • 原文地址:https://www.cnblogs.com/huangshikun/p/7097857.html
Copyright © 2011-2022 走看看