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

    某个主机的ip地址为:192.168.155.1 我们通过nbtstat -a ip命令就可知道这个主机的名称信息.

  2. 笔记：Spring Cloud Feign Ribbon 配置

    由于 Spring Cloud Feign 的客户端负载均衡是通过 Spring Cloud Ribbon 实现的,所以我们可以直接通过配置 Ribbon 的客户端的方式来自定义各个服务客户端调用的参 ...

  3. 笔记：Maven 依赖及配置详解

    dependencies 配置节,主要用于配置项目依赖的其他包,其子节点 dependency 用来配置具体依赖包,有groupId.artifactId.version.scope等子节点来说明,配 ...

  4. poj 3620

    题意:给出一个矩阵,其中有些格子干燥.有些潮湿. 如果一个潮湿的格子的相邻的四个方向有格子也是潮湿的,那么它们就可以构成更大 的湖泊,求最大的湖泊. 也就是求出最大的连在一块儿的潮湿的格子的数目. # ...

  5. Webpack的基本配置

    一.优化项目结构,创建相关的文件,项目结构如下:src文件夹存放相关js文件,index.html项目的首页面,dist文件夹是webpack 打包 目录. index.js内容为: alert('我 ...

  6. 【Python】 html解析BeautifulSoup

    BeautifulSoup bs是个html解析模块,常用来做爬虫? ■ 安装 BeautifulSoup可以通过pip来安装,用pip install beautifulsoup4 即可.但是仅仅这 ...

  7. 网络通信 --> IO多路复用之select、poll、epoll详解

    IO多路复用之select.poll.epoll详解      目前支持I/O多路复用的系统调用有 select,pselect,poll,epoll,I/O多路复用就是通过一种机制,一个进程可以监视 ...

  8. Matlab绘图基础——绘制三维曲线

    %% 绘制三维曲线 %plot3函数,其中每一组x,y,z组成一组曲线的坐标参数,选项的定义和plot函数相同. %1.当x,y,z是同维向量时,则x,y,z 对应元素构成一条三维曲线. x0 = 0 ...

  9. Node.js + gulp 合并静态页模版，文件更新自动热重载。浏览器可预览

    github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...

  10. beta冲刺3

    一,昨天的问题: 页面整理还没做 我的社团这边的后台数据库未完成,前端代码修改未完成. 二,今天已完成 页面整理基本完成,把登陆独立出来了,然后基本处理掉了多余页面(反正也没几个--) 我的社团这边试 ...