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. FFT模板（From MG）

    #include<cstdio> #include<cmath> #include<algorithm> using namespace std; struct c ...

  2. CentOS 安装Oracle 11g R2

    CentOS 安装Oracle 11g R2 学习了-/ https://www.osyunwei.com/archives/5445.html

  3. 项目中应用到的框架和技术之三——echarts

    echarts是效果丰富的图表库,当时考虑怎么炫怎么来就引入了这个库来做图表展示,官网:http://echarts.baidu.com 项目里用的比较浅,估且一看吧 代码: this.toChart ...

  4. samba 奇怪问题

    有一个centos 7  samba服务器,配置如下: [root@proxy223 20150331]# cat /etc/samba/smb.conf [global] workgroup = W ...

  5. BZOJ 3439 Kpm的MCpassword Trie树+可持久化线段树

    题目大意:给定n个字符串,对于每一个字符串求以这个字符串为后缀的字符串中第k小的编号 首先将字符串反转 那么就变成了对于每一个字符串求以这个字符串为前缀的字符串中第k小的编号 然后考虑对字符串排序 那 ...

  6. Codeforces #2B The least round way(DP)

    Description 有一个n*n的正整数矩阵,要你求一条从第一行第一列的格子到第n行第n列的路,使得你走过的格子里面的数乘起来的值末尾的零的个数最小.输出最小个数. Input 第一行包括1个数n ...

  7. Codeforces Round #211 (Div. 2)B. Fence

    B. Fence time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  8. [POI 2018] Prawnicy

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5102 [算法] 首先,n条线段的交集一定是[Lmax,Rmin] , 其中,Lmax ...

  9. ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？

    ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢? 很多文章中都有说道:当时ngRoute在路由配置时用$r ...

  10. css - 所有的a标签设置为新窗口打开

    前言 由于工作的需要,需要把某个页面下的所有a标签都设置为新开新窗口,即:<a href="XXX">增加target:<a href="XXX&quo ...