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

原生js中实现全选和反选功能的更多相关文章

  1. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  2. vue2.0在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  3. js事件---同一个事件实现全选与反选功能

    背景: 点击头部按钮,实现全选与反选功能 1.绑定事件,把当前勾选状态传递给方法 $event <el-checkbox v-model="ModelCheckAll" cl ...

  4. js实现CkeckBox全选与反选

    全选与反选 function SelectAll(){ var check = document.getElementsByTagName("input"); // 获取所有inp ...

  5. Delphi实现DBGrid全选和反选功能

    Delphi实现Dbgrid全选和反选.清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础.本模块就是实现了为Delphi的DBGrid数据列表 ...

  6. js中的全选，不选，和反选按钮的设定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  8. jquery中的全选、反选、全不选和单删、批删

    HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...

  9. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

随机推荐

  1. spy++捕获窗口消息

    打开spy++,窗口截图如下,点击窗口搜索按钮(红框标识) ,如果找不到对应的窗口,鼠标右键刷新即可. 鼠标左键点击窗口搜索图标,按住不放,拖到需要抓取消息的窗口上: spy++会自动在列表中高亮定位 ...

  2. 笔记：Struts2 文件上传和下载

    为了上传文件必须将表单的method设置为POST,将 enctype 设置为 muiltipart/form-data,只有设置为这种情况下,浏览器才会把用户选择文件的二进制数据发送给服务器. 上传 ...

  3. 基于jQuery/zepto的单页应用(SPA)搭建方案

    这里介绍一个基于jquery或zepto的单页面应用方案,遵循尽可能简单的原则,使大家一目了然,只需配置一个路由,之后完全按照jq日常写法即可完成.可做学习使用,也可修改后用于一些业务逻辑简单的spa ...

  4. Know your weapons Ⅱ

    本次内容主要讲述使用UWP相关技术可以实现的软件上的一些功能,这里以Netease-Cloud Music(下称Cloud Music)为例讲述,这款音乐软件我个人一直在用,毕竟人们生活离不开音乐,说 ...

  5. Javascript中几个看起来简单，却不一定会做的题

    Javascript作为前端开发必须掌握的一门语言,因为语言的灵活性,有些知识点看起来简单,在真正遇到的时候,却不一定会直接做出来,今天我们就一起来看看几道题目吧 题目1 var val = 'smt ...

  6. 用python程序来画花

    from turtle import * import time setup(600,800,0,0) speed(0) penup() seth(90) fd(340) seth(0) pendow ...

  7. [UWP]创建一个ProgressControl

    1. 前言 博客园终于新增了UWP的分类,我来为这个分类贡献第一篇博客吧. UWP有很多问题,先不说生态的事情,表单.验证.输入.设计等等一堆基本问题缠身.但我觉得最应该首先解决的绝对是Blend,那 ...

  8. Struts2学习笔记二 配置详解

    Struts2执行流程 1.简单执行流程,如下所示: 在浏览器输入请求地址,首先会被过滤器处理,然后查找主配置文件,然后根据地址栏中输入的/hello去每个package中查找为/hello的name ...

  9. Linux 终端 Bash 常用快捷键介绍及经验

    1. 最重要的自动补全 命令 解释 Tab 自动补全 不用多说,自动补全可以节省大量时间 2. 编辑跳转 命令 解释 Ctrl + A 跳转到当前行首 Ctrl + E 跳转到当前行末 Alt + F ...

  10. 【非官方】Surging 微服务框架使用入门

    前言 本文非 Surging 官方教程,只是自己学习的总结.如有哪里不对,还望指正. 我对 surging 的看法 我目前所在的公司采用架构就是类似与Surging的RPC框架,在.NET 4.0框架 ...