<!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. BIM软件Revit的优点

    BIM软件Revit的优点        那么多人喜欢使用这个软件的是因为BIM软件Revit极其强大的集成性和平台性.          BIM软件Revit的集成性        建筑是一个复杂数 ...

  2. 软件----- idea 配置创建一个简单javase项目

    1.显示工具栏和工具按钮,勾选上 如图,在左侧会增加对应的 2.设置项目结构,选择jdk 点击new  选择需要jdk 3.创建一个简单的java文件,和eclipse与myeslipse 差不多, ...

  3. 使用SolrJ客户端管理SolrCloud（Solr集群）

    1.使用SolrJ客户端管理SolrCloud(Solr集群). package com.taotao.search.service; import java.io.IOException; impo ...

  4. ASP.Net Core使用Ajax局部更新

    由于目前ASP.NET Core中没有提供Ajax帮助器,所以参照 上一篇帖文,使用data-ajax-*属性来使用jQuery Unobtrusive Ajax功能实现HTML的局部页面元素更新. ...

  5. Dev控件使用CheckedListBoxControl获取items.count为0 的解决方法

    CheckedListBoxControl,我使用DataSource属性,给其绑定了一个List对象.界面显示都挺正常的,当若干个项的复选框被选中的后,它的checkedListBoxControl ...

  6. Linux磁盘系统——磁盘系统简介

    Linux磁盘系统——磁盘系统简介 摘要:本文主要学习了Linux系统中有关磁盘的一些知识. 文件系统 说明 硬盘是用来存储数据的,可以将其想象成柜子,只不过柜子是用来存储衣物的.新买来的硬盘,通常要 ...

  7. 跨域问题 Blocked a frame with origin "http://......" from accessing a cross-origin frame.

    为了轻松偷懒,不想从目的项目中开发目标项目中的页面,但目的项目中需要获取老项目中的页面,这里用了iframe跨域链接页面出现了问题 Blocked a frame with origin " ...

  8. Java中的参数验证（非Spring版）

    1. Java中的参数验证(非Spring版) 1.1. 前言 为什么我总遇到这种非正常问题,我们知道很多时候我们的参数校验都是放在controller层的传入参数进行校验,我们常用的校验方式就是引入 ...

  9. this.$route和this.$router区别

    this.$route 和 this.$router 这两个对象有什么区别: this.$route 是当前路由跳转对象,包含当前路由的name.path.query.params等属性 this.$ ...

  10. Linux---进程控制类命令

    1.查看系统中的进程命令 (1)ps (2)top 2.控制系统中的进程命令 (1)kill (2)killall (3)nice (4)renice 3.进程后台运行命令 (1)& 4.进程 ...