<!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. Tomca原理分析之责任链

    责任链使用位置:Container处理请求 Container处理请求是使用Pipeline-Valve管道来处理的!(Valve是阀门之意) Pipeline-Valve是责任链模式,责任链模式是指 ...

  2. Appium 环境配置

    前言 Appium 作为移动端自动化测试工具在业界非常流行,特别是在当前移动互联网背景下,很多公司基于此框架来开展自动化测试.但 appium 的环境配置相对 selenium 来说复杂的多,让很多同 ...

  3. axios 源码解析(中) 代码结构

    axios现在最新的版本的是v0.19.0,本节我们来分析一下它的实现源码,首先通过 gitHub地址获取到它的源代码,地址:https://github.com/axios/axios/tree/v ...

  4. Python urlib 模块

    Python urlib 模块 urlib 模块 当前再爬虫领域使用的比较少,不过它对图片爬取处理会比较方便.这里我们只使用它的图片爬取. 使用 urlib.request.urlretrieve(u ...

  5. 禁止直接通过IP访问--->nginx

    在nginx.conf 中添加 server{ listen 80 default_server; return 501; } 注: nginx加载include是按顺序,如果是文件夹,就是文件顺序, ...

  6. csp201809-2 买菜

    问题描述 小H和小W来到了一条街上,两人分开买菜,他们买菜的过程可以描述为,去店里买一些菜然后去旁边的一个广场把菜装上车,两人都要买n种菜,所以也都要装n次车.具体的,对于小H来说有n个不相交的时间段 ...

  7. git did not exit cleanly (exit code 1) 的解决办法

    问题描述: 关于Git的使用,在通常情况下,习惯于先在本地创建一个本地仓库,然后将项目提交到本地master,再将本地master中的项目Push 到远程仓库中,这样问题就来了. 具体错误信息如下: ...

  8. PHP json中文

    json_encode 和 json_decode 只支持utf-8编码的字符串,GBK的字符串要用json就得转换成utf-8字符串 看效果 <?php header("Conten ...

  9. leetcode - 链表两两元素交换 + 判断链表有无环

    链表两两元素交换 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, 你 ...

  10. RabbitMQ启动报unknown exchange type 'x-delayed-message'

    RabbitMQ延迟队列插件未安装,导致以下问题: ShutdownSignalException: connection error; protocol method: #method<con ...