思路：全选按钮和子按钮分开考虑，当全选按钮选中的时候，也就是其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 237 删除链表中的节点

    237. 删除链表中的节点 请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将只被给定要求被删除的节点. 现有一个链表 – head = [4,5,1,9],它可以表示为: 示例 1: ...

  2. Java实现 蓝桥杯 算法提高 矩形靶

    试题 算法提高 矩形靶 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 在矩形的世界里任何事物都是矩形的,矩形的枪靶,甚至矩形的子弹.现在给你一张NM的枪靶,同时告诉你子弹的大小为( ...

  3. java实现罗马数字转十进制

    古罗马帝国开创了辉煌的人类文明,但他们的数字表示法的确有些繁琐,尤其在表示大数的时候,现在看起来简直不能忍受,所以在现代很少使用了.之所以这样,不是因为发明表示法的人的智力的问题,而是因为一个宗教的原 ...

  4. Linux fdisk手动分区

    查询系统中可以被识别的硬盘:fdisk -l 可以看到,我的服务器只有一块硬盘,容量是53.7GB,有1个分区,文件系统类型是Linux,Id 是83(82是Linux swap分区,相当于Windo ...

  5. LocalDateTime在项目中的使用（LocalDateTime对接前端通过时间戳互转、LocalDateTime对接数据库）

    目录 1. 博客编写背景 2. LocalDateTime 前端交互 2.1 LocalDateTime 向前端写入时间戳 2.1.1 fastJson 默认的写入格式 2.1.2 更改 fastJs ...

  6. Yangcs从简书搬回来了

    追求更加畅快淋漓的书写体验: 简书地址: http://www.jianshu.com/users/9913981cb400/latest_articles. Yangcs在简书[2016] 简书已经 ...

  7. 实践案例丨基于ModelArts AI市场算法MobileNet_v2实现花卉分类

    概述 MobileNetsV2是基于一个流线型的架构,它使用深度可分离的卷积来构建轻量级的深层神经网,此模型基于 MobileNetV2: Inverted Residuals and Linear ...

  8. Redis学习笔记（十八） 集群（下）

    复制和故障转移 Redis集群中的节点分为主节点(master)和从节点(slave),其中主节点用于处理槽,而从节点则用于复制某个主节点,并在被复制 的主节点下线时,代替下线主节点继续处理命令请求. ...

  9. PAT1040 Longest Symmetric String (25分) 中心扩展法+动态规划

    题目 Given a string, you are supposed to output the length of the longest symmetric sub-string. For ex ...

  10. 1.4 Spring 依赖注入（DI）和控制反转（IOC）详解

    自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html 1.1  Spring 依赖注 ...