开发应用中有很多工具可以使用，下面介绍一个原生js写的联动全选思路！！！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>联动全选</title>

</head>

    <script>

        window.onload = function(){

            // 在input外部添加一个box, 作用：为了更加精准的获取到要操作的input标签

            var oBox = document.getElementById('box');

            var aInput = oBox.getElementsByTagName('input');

            var oBtn = document.getElementById('btn');

            // 点击全选按钮的操作

            oBtn.onclick = function(){

                if(this.checked == true){ // 如果当前按钮使选中的状态，就让下面所有的选中

                    for(var i=0;i<aInput.length;i++){

                        aInput[i].checked = true;

                    }

                }else{

                    for(var i=0;i<aInput.length;i++){

                        aInput[i].checked = false;

                    }

                }

            }

            // 给每一个子集按钮都加上点击事件

            for(var i=0;i<aInput.length;i++){

                aInput[i].onclick = function(){

                    var n = 0;

                    for(var i=0;i<aInput.length;i++){

                        if(aInput[i].checked == true){

                            n++;

                        }

                    }

                    // document.title = n;

                    if(n == aInput.length){

                        oBtn.checked = true;

                    }else{

                        oBtn.checked = false;

                    }

                }

            }

        }

    </script>

<body>

    <input type="checkbox" id="btn"/>全选

    <br />

    <br />

    <div id="box">

        <input type="checkbox" /><br />

        <input type="checkbox" /><br />

        <input type="checkbox" /><br />

        <input type="checkbox" /><br />

        <input type="checkbox" /><br />

        <input type="checkbox" />

    </div>

</body>

</html>

原生js的联动全选的更多相关文章

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

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

  2. 原生js中实现全选和反选功能

    <!DOCTYPE html>      <html>      <head lang="en">          <meta char ...

  3. Angular-ngtable联动全选

    之前于Angular第三方插件ngTable的官网demo上看到的例子,但苦于demo中联动全选为选中所有,项目中并不适用,因此做了下小小的修改,修改目的只是为实现其功能,方法不敢苟同,若有更加简便的 ...

  4. js EasyUI前台 全选的实现

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWcAAAEQCAIAAADj/SKjAAAgAElEQVR4nO1dz48ry1W+/5N3swaFEP ...

  5. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  6. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  7. 原生js实现三级复选框

    工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head ...

  8. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

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

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

随机推荐

  1. 从输入URL到浏览器显示页面发生了什么

    1.输入网址 当你开始输入网址比如www.cnblogs.com时游览器就可以在书签或者历史记录里面去搜索相关的网址推荐给你. 2.游览器查找域名的IP地址 ① 请求发起后,游览器首先会解析这个域名, ...

  2. Reinforcement Learning Solutions Ed2 Chapter 1 - 2 问题解答

    RL到了第三章题目多的不可思议 前两章比较简单,就在博客随便写写了.之后的用pdf更新. 1.1: Self-play will result different move even from the ...

  3. docker简单介绍----Dockerfile命令

    DockerFile的组成部署: 下面优先介绍下Dcokerfile的基础指令 一.CMD指令:容器启动时要莫热门运行的命令,如果有多个CMD指定,最后一个生效 使用方法: CMD ["ex ...

  4. sqlite3 学习

    安装sqlite: [ sqlite]$ wget http://www.sqlite.org/sqlite-3.6.16.tar.gz[ sqlite]$ tar -xzvf sqlite-3.6. ...

  5. USB鼠标键盘数据格式以及按键键值

    鼠标发送给PC的数据每次4个字节 BYTE1 BYTE2 BYTE3 BYTE4 定义分别是: BYTE1 --        |--bit7:   1   表示   Y   坐标的变化量超出-256 ...

  6. 《剑指offer》和为S的两个数字

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  7. Shell执行*.sql

    > mysql -uroot -p123456 > use db_test > source /root/temp.sql

  8. vmware 虚拟机报错 删除文件夹，可以恢复

  9. MongoD 语法

    MongoD 语法 1.常用 1 .查看有哪些库 > show dbs; admin 0.000GB config 0.000GB local 0.000GB 2 .当前库,只存在于内存中 &g ...

  10. 利用广度优先搜索(BFS)与深度优先搜索(DFS)实现岛屿个数的问题（java）

    需要说明一点,要成功运行本贴代码,需要重新复制我第一篇随笔<简单的循环队列>代码(版本有更新). 进入今天的主题. 今天这篇文章主要探讨广度优先搜索(BFS)结合队列和深度优先搜索(DFS ...