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. C# 解决EXCEL单元格合并,行高无法自适应问题

    解决方法:根据单元格内容长度,设置单元格所在行的行高 public static float getExcelCellAutoHeight(string strtest, float fontCoun ...

  2. 深刻理解Python中的元类(metaclass)--代码实践

    根据http://blog.jobbole.com/21351/所作的代码实践. 这篇讲得不错,但以我现在的水平,用到的机会是很少的啦... #coding=utf-8 class ObjectCre ...

  3. Ubuntu 16.04安装设备管理器Hardinfo和lshw设备信息命令

    安装: sudo apt-get install hardinfo 启动: 实际上这些信息都可以通过lshw进行查看,参考:https://linux.die.net/man/1/lshw

  4. 25、Java并发性和多线程-阻塞队列

    以下内容转自http://ifeve.com/blocking-queues/: 阻塞队列与普通队列的区别在于,当队列是空的时,从队列中获取元素的操作将会被阻塞,或者当队列是满时,往队列里添加元素的操 ...

  5. C++中设计一个类，使其不能继承

    1.C++11中已经有了final关键字:它的作用是指定类的虚函数不能被该类的继承类覆盖(override),或者是指定一个类成为一个不能被继承的类(final class) 2.派生类用调用基类的构 ...

  6. golang中channels的本质详解，经典!

    原文:https://www.goinggo.net/2014/02/the-nature-of-channels-in-go.html The Nature Of Channels In Go 这篇 ...

  7. HDU2193-AVL-数据结构-AVL

    题目链接:http://acm.hdu.edu.cn/statistic.php? pid=2193&from=126&lang=&order_type=0 好吧.水题一道,原 ...

  8. 大数据分析:结合 Hadoop或 Elastic MapReduce使用 Hunk

    作者 Jonathan Allen ,译者 张晓鹏 Hunk是Splunk公司一款比較新的产品,用来对Hadoop和其他NoSQL数据存储进行探測和可视化,它的新版本号将会支持亚马逊的Elastic ...

  9. Codeforces 91C Ski Base 加边求欧拉回路数量

    题目链接:点击打开链接 题意: 给出n个点m条无向边的图 開始图里没有边.每次加一条边,然后输出图里欧拉回路的条数. 思路: We will count the number of ski bases ...

  10. VFL语言简洁

    一.VFL语言简洁 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码.为我们简化了许多代码量. 二.使用步骤 使用步骤 ...