开发应用中有很多工具可以使用，下面介绍一个原生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. 关于C的全局变量

    一般来说,不会将全局变量的定义写在头文件中.因为如果多个C源文件都添加了头文件,很容易引起重复定义的问题,这时候一般编译器都会提示.正确的做法是在C源文件中定义一个全局变量,在头文件中加入全局变量的声 ...

  2. git 解决每次更新代码都要输入用户名密码的解决方案

    使用git pull或者git push每次都需要输入用户名和密码很繁琐,耽误时间,现在教大家一条命令实现保存用户名和密码不用再输入 git config --global credential.he ...

  3. 001 爬虫的基本概念以及urllib的request和parse

    1.http的请求方式: get请求 优点:比较便捷 缺点:不安全.长度有限制post请求 优点:比较安全.数据整体没有限制.可以上传文件putdelete(删除一些信息) 发送网络请求(可以带一定的 ...

  4. opencv基础教程

    1,基本语法 环境:python3.6.6+numpy+opencv3 安装:没有详细编译,直接pip install opencv-python 矩阵和图片: img=numpy.zeros((3, ...

  5. [系统集成] RT（Request Tracker）执行自定义脚本及发送微信、短信的实现方法

    RT(Request Tracker)是一个基于 Perl 语言的开源状态跟踪和工作流系统,支持审批.权限管理等功能,中文化支持的也不错,可以作为企业的流程审批系统使用.可惜的是,该系统在国内使用的不 ...

  6. Docker-----仓库

    安装registry 安装并启动docker yum -y install docker systemctl enable docker systemctl start docker 下载regist ...

  7. java8---lambda表达式

    语法糖 lambda表达式允许你通过表达式来代替功能接口. lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使用这些参数的主体(body,可以是一个表达式或一个代码块).Lambda表 ...

  8. git 命令笔记

    切换 git 远程仓库HEAD分支 $ git remote set-head origin some_branch

  9. 如何选择 Apache Tomcat 与 JDK 版本

    Apache Tomcat Version

  10. BLO（bzoj1123）

    Description Byteotia城市有n个 towns, m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n和 ...