<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        table

        {

            border-collapse: collapse;

        }

        td

        {

            border: 1px solid #000000;

            width: 100px;

            height: 30px;

            text-align: center;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <td>

                <label for="allCheck">全选</label><br><input id="allCheck" type="checkbox">

            </td>

        </tr>

        <tr>

            <td>

                <input id="check0" type="checkbox">

            </td>

        </tr>

        <tr>

            <td>

                <input id="check1" type="checkbox">

            </td>

        </tr>

        <tr>

            <td>

                <input id="check2" type="checkbox">

            </td>

        </tr>

        <tr>

            <td>

                <input id="check3" type="checkbox">

            </td>

        </tr>

        <tr>

            <td>

                <input id="check4" type="checkbox">

            </td>

        </tr>

    </table>

    <script>

        var allCheck=document.getElementById("allCheck");

        allCheck.addEventListener("click",clickHandler);

        for(var i=0;i<5;i++){

            var check=document.getElementById("check"+i);

            check.addEventListener("click",clickHandler)

        }

        function clickHandler(e) {

            if(this===allCheck){

                for(var i=0;i<5;i++){

                    var check=document.getElementById("check"+i);

//                    让所有的多选框的checked都和全选的checked相同

                    check.checked=allCheck.checked;

                }

                return;//终结后面的代码

            }

            for(var j=0;j<5;j++){

                var checks=document.getElementById("check"+j);

                if(!checks.checked){

                    allCheck.checked=false;

                    return;

                }

            }

            allCheck.checked=true;

        }

    </script>

</body>

</html>

原生js-input框全选的更多相关文章

  1. 原生js的联动全选

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

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

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

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

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

  4. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  5. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  7. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  8. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...

  10. input单选框全选与反选

    input单选框全选与反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. CodeForce 176C Playing with Superglue

    Two players play a game. The game is played on a rectangular board with n × m squares. At the beginn ...

  2. 微博Feed流

    一.微博核心业务图 二.微博的架构设计图 三.简述 先来看看Feed流中的一些概念: Feed:Feed流中的每一条状态或者消息都是Feed,比如微博中的一条微博就是一个Feed. Feed流:持续更 ...

  3. 漫谈微服务架构：什么是Spring Cloud，为何要选择Spring Cloud

        Spring Cloud是基于Spring Boot的,因此还在使用SpringMVC的同学要先了解Spring Boot.先上一段官话,Spring Cloud是一个基于Spring Boo ...

  4. [KMP]一本通(http://ybt.ssoier.cn:8088) 1698:字符串匹配

    字符串匹配 [题目描述] 对于一个字符集大小为C的字符串pp,可以将任意两个字符在p中的位置进行互换,例如p=12321,交换1.21.2得到21312,交换1.4得到42324,交换可以进行任意次. ...

  5. 时间复杂度o(1), o(n), o(logn), o(nlogn)

    1.时间复杂度o(1), o(n), o(logn), o(nlogn).算法时间复杂度的时候有说o(1), o(n), o(logn), o(nlogn),这是算法的时空复杂度的表示.不仅仅用于表示 ...

  6. AspNetCore.Identity详解1——入门使用

    今年在面试的时候被问到单点登录的知识,当时支支吾吾不知该如何作答,于是面试失败.回到住所便开始上网查找资料,但苦于难于找到详尽的demo,总是无法入门.又由于我正在学习了解asp.net core,里 ...

  7. 《深入理解Java虚拟机》并发(第12~13章)笔记

    volatile关键字的作用 所有变量的可见性--仅仅是修改后的值的可见性,不保证并发修改时新值和预期一致.即只保证读,不保证写. 禁止指令重排序--修饰的变量,读写不会指令重排.如变量isReady ...

  8. 工作笔记--Python自动切换host

    修改host代码: #coding:utf-8import os,time pwd = os.path.dirname(__file__) #获取当前文件夹的绝对路径pull_host_cmd = ' ...

  9. Eureka源码解析系列文章汇总

    先看一张图 0 这个图是Eureka官方提供的架构图,整张图基本上把整个Eureka的核心功能给列出来了,当你要阅读Eureka的源码时可以参考着这个图和下方这些文章 EurekaServer Eur ...

  10. Vue--运行项目发送http://localhost:8080/sockjs-node/info请求报错，造成浏览器不能热更新

    今早习惯打开vscode 输入 npm run dev 准备修复测试提出的bug 不料一堆通红的报错,让人感到有点绿的慌. 有问题呢,就需要解决问题.经过一番排查后发现是我昨天为了让测试在我本地项目中 ...