1、每个子input标签都需要进行判断

2、使用开闭原则，一旦满足条件就改变默认值

3、在给主input标签注册事件时，要求主input标签的checked值赋值给子标签

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .wrap {

            width: 300px;

            margin: 100px auto 0;

        }

        table {

            border-collapse: collapse;

            border-spacing: 0;

            border: 1px solid #c0c0c0;

            width: 300px;

        }

        th,

        td {

            border: 1px solid #d0d0d0;

            color: #404060;

            padding: 10px;

        }

        th {

            background-color: #09c;

            font: bold 16px "微软雅黑";

            color: #fff;

        }

        td {

            font: 14px "微软雅黑";

        }

        tbody tr {

            background-color: #f0f0f0;

        }

            tbody tr:hover {

                cursor: pointer;

                background-color: #fafafa;

            }

    </style>

</head>

<body>

    <div class="wrap">

        <table>

            <thead>

                <tr>

                    <th>

                        <input type="checkbox" id="theadInp" />

                    </th>

                    <th>菜名</th>

                    <th>饭店</th>

                </tr>

            </thead>

            <tbody id="tbody">

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>地三鲜</td>

                    <td>田老师</td>

                </tr>

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>西红柿鸡蛋</td>

                    <td>田老师</td>

                </tr>

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>醋溜土豆丝</td>

                    <td>田老师</td>

                </tr>

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>萝卜干炒黄豆儿</td>

                    <td>田老师</td>

                </tr>

            </tbody>

        </table>

    </div>

    <script>

        var inp = document.getElementById("theadInp");

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

        var inps = tbody.getElementsByTagName("input");

        //给表头的input标签注册事件

        inp.onclick = function () {

            for (var i = 0; i < inps.length; i++) {

                inps[i].checked = this.checked;

            }

        }

        //给tbody中的input标签注册事件

        for (var i = 0; i < inps.length; i++) {

            inps[i].onclick = function () {

                var bool = true;

                for (var i = 0; i < inps.length; i++) {

                    if (inps[i].checked === false) {

                        bool = false;

                    }

                }

                inp.checked = bool;

            }

        }

    </script>

</body>

</html>

JS——全选与全不选的更多相关文章

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

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

  2. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  3. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

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

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

  5. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  6. JS或jQuery实现一组复选框的全选和取消全选？

    //1.JS方式实现:checkbox 全选/取消全选  var isCheckAll = false;  function swapCheck() {    if (isCheckAll) {    ...

  7. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

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

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

  9. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

  10. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

随机推荐

  1. 如何将jsp后缀重写为html

    公司有时候要写一些小的项目,而用java搭建web的一个缺(特)陷(征)就是动态网页的后缀名.jsp.没办法啊,就是不能以.jsp结尾,原因有几个:隐藏服务端技术:吸引爬虫:对用户更友好:等等.如果全 ...

  2. JAVA NIO 之 Selector 组件

    NIO 重要功能就是实现多路复用.Selector是SelectableChannel对象的多路复用器.一些基础知识: 选择器(Selector):选择器类管理着一个被注册的通道集合的信息和它们的就绪 ...

  3. P3383 【模板】线性筛素数 洛谷

    https://www.luogu.org/problem/show?pid=3383#sub 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输 ...

  4. Python3基础（二） 基本数据类型

    Python中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在Python中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对象的类型 ...

  5. WPF学习笔记：ComboBox的数据绑定

    UI <UserControl x:Class="UnitViews.UserMeUV" xmlns="http://schemas.microsoft.com/w ...

  6. UVALive 4671 K-neighbor substrings 巧用FFT

    UVALive4671   K-neighbor substrings   给定一个两个字符串A和B B为模式串.问A中有多少不同子串与B的距离小于k 所谓距离就是不同位的个数. 由于字符串只包含a和 ...

  7. Makefile 实际用例分析（三） ------- 是用GUN automake 处理自己的工程

    前面两篇已经说过了自己怎么去为一个工程写makefile: 第一篇 第二篇 现在这一篇说的是怎么使用GNU的工具去写一个符合开源标准的Makefile呢! 首先我觉你应该参考: Automake Au ...

  8. PCB 模拟Windows管理员域帐号安装软件

    在我们PCB行业中,局域网的电脑一般都会加入域控的,这样可以方便集中管理用户权限,并可以对访问网络资源可以进行权限限制等. 由于加入了域控对帐号权限的管理,这样一来很多人都无权限安装软件,比如:PCB ...

  9. Linux 用户管理(1) (/etc/passwd)

    Linux所有的用户都在/etc/passwd文件里面. 1.为什么需要用户 1)计算机及网络资源的合理分配  2)可以控制用户访问系统的权限.3)身份认证 4) 进程 以某个用户的身份来运行 2.用 ...

  10. Unity - 简单实例化的应用

    项目描述:每帧实例化一个随机颜色的物体(Cube),坐标在某范围内随机:且物体每帧都会缩小,当缩小到一定的尺寸时,就销毁物体 代码描述: public class CubeSpawner : Mono ...