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. 【BZOJ1014】火星人prefix（splay，Hash）

    题意: . 思路: ; ..,..]of longint; sum,size,fa,a,b,id,mi:..]of longint; n,m,i,x,y,s,k,j,cnt,root:longint; ...

  2. H3c 配置ssh acl

    http://www.h3c.com/cn/d_201108/723349_30005_0.htm

  3. BZOJ(3) 1051: [HAOI2006]受欢迎的牛

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7365  Solved: 3937[Submit][Sta ...

  4. Mcrouter-基于Memcached协议的缓存层流量管理工具（Memcached集群的另一个选择）（转）

    Mcrouter 是一个基于Memcached协议的路由器,它是 Facebook缓存架构的核心组件,在峰值的时候,它能够处理每秒50亿次的请求.近日,Facebook开放了Mcrouter的源代码, ...

  5. Microsoft SQL Server Query Processor Internals and Architecture

    https://msdn.microsoft.com/en-us/library/aa226174(v=sql.70).aspx

  6. Scala入门到精通——第十五节 Case Class与模式匹配（二）

    本节主要内容 模式匹配的类型 for控制结构中的模式匹配 option类型模式匹配 1. 模式的类型 1 常量模式 object ConstantPattern{ def main(args: Arr ...

  7. Redis 持久化，写入磁盘的方式

    如果帮到了您,可以支持一下,谢谢您的支持! Redis是一个支持持久化的内存数据库=>也就是说redis需要经常将内存中的数据同步到磁盘来保证持久化. redis支持四种持久化方式, 一是 Sn ...

  8. uva10152-ShellSort

    Problem D: ShellSort He made each turtle stand on another one's back And he piled them all up in a n ...

  9. android后台input命令模拟按键【转】

    本文转载自:http://www.cnblogs.com/sh1o2os/archive/2013/02/05/2893201.html 有时做开发时,我们使用的触摸屏没有虚拟按键(HOME.BACK ...

  10. 主表a主表b 从表c中有ab两个表中各一个字段a1,b1 从表d中有ab两个表中各一个字段a2,b2

    a1和a2在a表中具有唯一性 b1和b2在b表中具有唯一性 现在需要连接c表和d表 需要分两步来做 1.先让c表join表a和表b select c.*,a.a2,b.b2 from c inner ...