思路：全选按钮和子按钮分开考虑，当全选按钮选中的时候，也就是其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实现蓝桥杯模拟约数的个数

    问题描述 1200000有多少个约数(只计算正约数). 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余的内容将无法得分. pac ...

  2. Java实现 LeetCode 205 同构字符串

    205. 同构字符串 给定两个字符串 s 和 t,判断它们是否是同构的. 如果 s 中的字符可以被替换得到 t ,那么这两个字符串是同构的. 所有出现的字符都必须用另一个字符替换,同时保留字符的顺序. ...

  3. Java实现 LeetCode 32 最长有效括号

    32. 最长有效括号 给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()" 输出: 2 解释: 最长有效括号子串为 & ...

  4. Java实现第九届蓝桥杯第几个幸运数字

    第几个幸运数字 题目描述 到x星球旅行的游客都被发给一个整数,作为游客编号. x星的国王有个怪癖,他只喜欢数字3,5和7. 国王规定,游客的编号如果只含有因子:3,5,7,就可以获得一份奖品. 我们来 ...

  5. 数据结构:用实例分析ArrayList与LinkedList的读写性能

    目录 背景 ArrayList LinkedList 实例分析 1.增加数据 2.插入数据 3.遍历数据 3.1.LinkedList遍历改进 总结 背景 ArrayList与LinkedList是J ...

  6. Scrapy 小技巧（一）：使用 scrapy 自带的函数（follow & follow_all）优雅的生成下一个请求

    前言 如何优雅的获取同一个网站上下一次爬取的链接并放到生成一个 Scrapy Response 呢? 样例 from urllib import parse import scrapy class S ...

  7. 因为 MongoDB 没入门，我丢了一份实习工作

    有时候不得不感慨一下,系统升级真的是好处多多,不仅让我有机会重构了之前的烂代码,也满足了我积极好学的虚荣心.你看,Redis 入门了.Elasticsearch 入门了,这次又要入门 MongoDB, ...

  8. k8s学习-安全

    4.8.安全 4.8.1.概念 一些内容可参考4.6.2.Secret的内容 说明 Kubernetes 作为一个分布式集群的管理工具,保证集群的安全性是其一个重要的任务.API Server 是集群 ...

  9. Python内置Turtle绘图库方法简介+多案例

    urtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的 ...

  10. ArrayList、LinkedList、Vector、Array和HashMap、HashTable

    就 ArrayList 与 Vector 主要从二方面来说. 一.同步性:Vector 是线程安全的,也就是说是同步的,而ArrayList 是线程序不安全的,不是同步的 二.数据增长:当需要增长时, ...