思路：全选按钮和子按钮分开考虑，当全选按钮选中的时候，也就是其checked为true的时候，所有的子按钮也全都为true，反之，则为false。子按钮的想法是，当点击某一个子按钮的时候，会看一下是否所有的子按钮都被选中，如果都选中，则全选按钮也同时为true

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            user-select: none;

        }

        table{

            width: 500px;

            height: 200px;

            margin: 15px 0 0 15px;

            text-align: center;

        }

        table td{

            border-bottom: 1px solid #ccc;

            border-left: 1px solid #ccc;

        }

        table .lasttd,.lastth{

            border-right: 1px solid #ccc;

        }

        table th{

           border-bottom: 1px solid #ccc;

           border-left: 1px solid #ccc;

           border-top: 1px solid #ccc;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <th><input type="checkbox" class="check-all" ></th>

            <th>菜品</th>

            <th class="lastth">价格</th>

        </tr>

        <tr>

            <td><input type="checkbox" ></td>

            <td>宫保鸡丁</td>

            <td class="lasttd">10</td>

        </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td>宫保鸡丁</td>

            <td class="lasttd">10</td>

        </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td>宫保鸡丁</td>

            <td class="lasttd">10</td>

        </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td>宫保鸡丁</td>

            <td class="lasttd">10</td>

        </tr>

    </table>

    <script>

        var checkAll=document.querySelector('.check-all');

        var checklist=document.querySelectorAll('td input');

        var num=0;

        // console.log(checklist)

        //全选按钮

        checkAll.onclick=function(){

            if(checkAll.checked){

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

                checklist[i].checked=true;

                }

                num=checklist.length;

            }else{

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

                checklist[i].checked=false;

                }

                num=0;

            };

        }

      //子按钮

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

            checklist[i].onclick=function(){

                if(this.checked) num++;

                else num--;

                if(num==checklist.length)

                  checkAll.checked=true;

                else checkAll.checked=false;

            }

        }

    </script>

</body>

</html>

js实现简单的菜谱全选功能的更多相关文章

  1. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  2. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  3. JS实现全选功能

    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...

  4. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  5. js事件---同一个事件实现全选与反选功能

    背景: 点击头部按钮,实现全选与反选功能 1.绑定事件,把当前勾选状态传递给方法 $event <el-checkbox v-model="ModelCheckAll" cl ...

  6. S全选功能代码

    JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...

  7. EasyUI datagrid 复选框可以多选但不能全选功能实现

    1.功能需求:  实现多选,但是不能够全选功能 2.js代码 //帮卖列表页面,可以多选但是不能够全选实现 $(".datagrid-header-check").children ...

  8. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  9. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

随机推荐

  1. Java实现 LeetCode 999 车的可用捕获量（简单搜索）

    999. 车的可用捕获量 在一个 8 x 8 的棋盘上,有一个白色车(rook).也可能有空方块,白色的象(bishop)和黑色的卒(pawn).它们分别以字符 "R"," ...

  2. Java实现 LeetCode 554 砖墙（缝隙可以放在数组？）

    554. 砖墙 你的面前有一堵方形的.由多行砖块组成的砖墙. 这些砖块高度相同但是宽度不同.你现在要画一条自顶向下的.穿过最少砖块的垂线. 砖墙由行的列表表示. 每一行都是一个代表从左至右每块砖的宽度 ...

  3. Java实现 蓝桥杯VIP 算法提高 Torry的困惑(提高型)

    算法提高 Torry的困惑(提高型) 时间限制:1.0s 内存限制:512.0MB 问题描述 Torry从小喜爱数学.一天,老师告诉他,像2.3.5.7--这样的数叫做质数.Torry突然想到一个问题 ...

  4. 洛谷P1255 数楼梯

    题目描述   楼梯有N阶,上楼可以一步上一阶,也可以一步上二阶.   编一个程序,计算共有多少种不同的走法. 分析与代码   走n阶楼梯,无论是走一次走1阶还是2阶,总得迈出一步,   所以求n阶楼梯 ...

  5. 【Flutter实战】移动技术发展史

    老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统 塞班( ...

  6. Koa源码解析，带你实现一个迷你版的Koa

    前言 本文是我在阅读 Koa 源码后,并实现迷你版 Koa 的过程.如果你使用过 Koa 但不知道内部的原理,我想这篇文章应该能够帮助到你,实现一个迷你版的 Koa 不会很难. 本文会循序渐进的解析内 ...

  7. 03 . Django之腾讯云短信

    简介 由于项目在注册.登录.找回密码 时需要发送短信验证的功能,我们使用腾讯云短信做. 为什么要用腾讯云短信呢? 因为注册就送 100条免费短信 的额度. 注册腾讯云 注册一个腾讯云账户,腾讯云中提供 ...

  8. activeMQ从入门到简单集群指南

    1.什么是amq MQ是消息中间件,基于JAVA的JMS消息服务机制来传递信息. 2.mq的作用 MQ给程序之间提供了一个缓冲,避免了在程序交互频繁的情况下,提高程序性能瓶颈和数据的可靠性 3.mq怎 ...

  9. 2019-02-02 Python学习之死锁和Rlock

    死锁:"当一个线程永远地持有一个锁,并且其他线程都尝试去获得这个锁时,那么它们将永远被阻塞" e.g. import threading import time mutexboy ...

  10. Android开发学习笔记Intent 一

    Inten的概念 1.Intent是Android四大组件直接沟通的桥梁 2.Intent是一种运行时绑定(runtime binding)机制 Intent对象的属性 Itent的种类 Inten过 ...