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. 使用ajax，后台传回的数据处理

    使用ajax,后台传到前台的是json数据,但这只是一个字符串的形式,需要进行转换为对象 转换后再使用$.each()方法进行遍历 使用alert(typeof  msg) ;  可以查看msg的类型 ...

  2. 高数(A)下 第十章

    10.1 10.2 10.3 10.4 10.5 10.7 自测题

  3. MAPZONE GIS SDK接入Openlayers3之四——高级标注效果实现

    首先看实现效果: 实现要点: 1)树形标注实现 2)复杂标注样式定义 3)效率优化 1.树形标注实现 树形标注采用字体符号来实现,包括以下几个步骤 1)载入字体 2)设置标注值与字体对照关系 3)设置 ...

  4. python-paramiko初体验

    什么pexpect.pxshll在paramiko面前都是浮云,重要的是paramiko支持windows. 小试牛刀 import paramiko paramiko.util.log_to_fil ...

  5. swift 2.0 语法 数组

    import UIKit /*: 数组 * 格式 var arr:[Int] = [数值1, 数值2, 数值3] * 不可变数组  let  == NSArray * 可变数组    var */ l ...

  6. LeetCode 451. Sort Characters By Frequency （根据字符出现频率排序）

    Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...

  7. mysql安装后改动port号password默认字符编码

    1.改动password grant all privileges on *.* to 'root'@'localhost' identified by 'new password'; 2.改动por ...

  8. 【网易云音乐 for linux】 踩过的坑

    1.从官网下载的包,却怎么也安装不上. 提示依赖,网上全是什么 sudo apt-get -f install ,结果提示有没有完成安装的包,让我卸载. 于是按下Y卸载了网易云. 尝试一个个修复以来, ...

  9. LeetCode241——Different Ways to Add Parentheses

    Given a string of numbers and operators, return all possible results from computing all the differen ...

  10. shell脚本-基础

    shell脚本-基础 编程基础 程序是指令+ 数据 程序编程风格: 过程式:以指令为中心,数据服务于指令 对象式:以数据为中心,指令服务于数据 shell 程序提供了编程能力,解释执行. 计算运行二进 ...