<!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. 使用Docker搭建HttpRunnerManager环境

    建立一个HttpRunnerManager的环境需要Mysql,RabbitMQ服务,为简单部署,全部使用Docker 1. 在服务器建立Docker环境 2.建立Mysql容器 docker run ...

  2. spring的@ControllerAdvice注解

    @ControllerAdvice注解是Spring3.2中新增的注解,学名是Controller增强器,作用是给Controller控制器添加统一的操作或处理. 对于@ControllerAdvic ...

  3. Kubernetes DaemonSet（部署守护进程）

    Kubernetes DaemonSet(部署守护进程) • 在每一个Node上运行一个Pod• 新加入的Node也同样会自动运行一个Pod 应用场景:Agent 官方文档:https://kuber ...

  4. Logstash：把MySQL数据导入到Elasticsearch中

    Logstash:把MySQL数据导入到Elasticsearch中 前提条件 需要安装好Elasticsearch及Kibana. MySQL安装 根据不同的操作系统我们分别对MySQL进行安装.我 ...

  5. 如何判断服务器之间的服务是否可用？ping 还是 telnet？

    1. 背景 机器A需要调用机器B的服务,为此要保证服务的可用性,我们有时候用ping,有时候用telent来验证机器A和B的连通性,但有时候会出现这种情况,A可以ping通B,但A调用B的服务会一直报 ...

  6. dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其标签关联的其他文章地址

    dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其他标签关联的文章地址 1 添加2个自定义函数 在dede/include/extend.func.php底部 添加如下代码 //根据文 ...

  7. 网格弹簧质点系统模拟（Spring-Mass System by Fast Method）附源码（转载）

    转载:  https://www.cnblogs.com/shushen/p/5311828.html 弹簧质点模型的求解方法包括显式欧拉积分和隐式欧拉积分等方法,其中显式欧拉积分求解快速,但积分步长 ...

  8. Attract队作品简介

    湖南师范大学  Attract队 荣获“航天宏图杯”PIE遥感图像处理软件二次开发大赛二等奖 作品名称:基于深度学习的遥感影像分类系统-以长沙市居住区分类为例 团队简介:周亮(指导老师).张慧(组长) ...

  9. openssl生成随机数

    #include <stdio.h> #include <openssl/bn.h> int main() { BIGNUM *bn; bn = BN_new(); //生成一 ...

  10. 【转】Linux上安装rz和sz命令

    简介 lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZModem文件传输协议 windows 需要向ce ...