<!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>

最新文章

  1. get和post的区别
  2. 《Automatic Face Classification of Cushing’s Syndrome in Women – A Novel Screening Approach》学习笔记
  3. 换个角度说工作单元（Unit Of Work）：创建、持有与API调用
  4. [BZOJ4530][Bjoi2014]大融合 LCT + 启发式合并
  5. 深入理解Struts2----数据校验
  6. 总结下Redux
  7. Tencent分布式开源框架Pebble
  8. 解决Select标签的Option在IE浏览中display:none不生效的问题
  9. Can peel peel solve pesticide problem
  10. Day 10 函数的形参，实参
  11. MAC下搭建个人博客
  12. redis的一命令
  13. html多个水平并列组件自适应等高的做法
  14. ios中封装九宫格的使用（二级导航）
  15. 豆瓣上9分以上的IT书籍-编程语言篇
  16. geoserver 数据图层输出格式
  17. MongoVUE破解
  18. 【NOIP2017】列队 splay
  19. Visual Studio 2017 百度云下载
  20. Mac 10.12安装窗口快速缩放到一定比例的工具Moom

热门文章

  1. Sqlite库的基本操作
  2. AngularJS复习------表单验证
  3. Suricata默认规则集相关
  4. java基础笔记（4）----数组
  5. vs2013和.net 4.5.1调用.net core中的Kestrel（基于libuv)的http服务器代码 两种方式
  6. IDEA的快捷键的使用
  7. [日常] AtCoder Beginner Contest 075 翻车实录
  8. iOS Storyboard unwind segues使用小结
  9. HTTP协议以及HTTP2.0/1.1/1.0区别
  10. [Android FrameWork 6.0源码学习] View的重绘过程之WindowManager的addView方法