开发应用中有很多工具可以使用，下面介绍一个原生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. static 关键字 静态成员变量及静态成员函数

    static类成员 类成员类似于C语言的全局变量,但是与全局变量又有所不同,例如,全局变量是可以被任何的用户代码所修改,而且全局变量破坏了对象的封装性. 使用类的 static 成员的优点 使用 st ...

  2. [Kubernetes]说说 Service 与 Ingress

    在 Kubernetes 中, Service 有三种对外暴露的方法,但是由于每个 Service 都要有一个负载均衡的服务,所以采用 Service 的话,会造成既浪费成本又高的现象.对于用户来说, ...

  3. git知识总结-3.gitignore文件说明

    1.前言 一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表. 通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等. 在这种情况下,我们可以创建一个名 ...

  4. ABP core学习之二 IIS部署.NET CORE

    本文是关于IIS部署.NET CORE的总结,以后有碰到问题将陆续添加 IIS部署.NET CORE总结 一.服务器环境 首先确定自己项目的core版本,然后下载对应的包在服务器上安装 下载地址: h ...

  5. 关于 git 本地创建 SSH Key 遇到的一点问题（①file to save the key & ②the authenticity of host...)

    背景 由于想测试一下 SSH Key 创建的路径(.ssh 目录路径)对于不同位置 git 项目是否有效. 比如,.ssh 默认在 C:\[users]\[username] 目录下,而项目 proj ...

  6. mysql-视图、触发器、事务、存储过程、流程控制

    目录 视图 触发器 事务 存储过程 流程控制 一.视图 视图是由查询结果构成的一张虚拟表,和真实的表一样,带有名称的列和行数据 强调:视图是永久存储的,但是视图存储的不是数据,只是一条sql语句 视图 ...

  7. JAVA This的简单运用

    package Code426;/*当方法的局部变量和类的成员变量重名时,根据“就近原则”,优先使用局部变量如果需要访问本类当中的成员变量,需要使用 this.成员变量 通过谁调用的方法,谁就是thi ...

  8. 有名的素MM

    from math import sqrt item=[] for yr in [1988,1989]: for mth in range(1,13): if mth in [1,3,5,7,8,10 ...

  9. P4098 [HEOI2013]ALO

    最近这个家伙去哪了,为啥一直不更博客了呢?原来他被老师逼迫去补了一周的文化课,以至于不会把班里的平均分拉掉太多.好了,我们来看下面这道题目: P4098 [HEOI2013]ALO 题目描述 Welc ...

  10. 主席树——树链上第k大spoj COT

    首先要求第k大就想到用主席树来处理 但是不能直接用树链剖分的dfs序来维护,因为一条链对应的dfs下标可能是断开的几段,无法用权值线段树来维护 那么久维护每个点到根节点的全值线段树,结点u的权值线段树 ...