思路：全选按钮和子按钮分开考虑，当全选按钮选中的时候，也就是其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 611 有效三角形的个数（双指针）

    611. 有效三角形的个数 给定一个包含非负整数的数组,你的任务是统计其中可以组成三角形三条边的三元组个数. 示例 1: 输入: [2,2,3,4] 输出: 3 解释: 有效的组合是: 2,3,4 ( ...

  2. Java实现 蓝桥杯VIP基础练习 矩形面积交

    描述 平面上有两个矩形,它们的边平行于直角坐标系的X轴或Y轴.对于每个矩形,我们给出它的一对相对顶点的坐标,请你编程算出两个矩形的交的面积. 输入 输入仅包含两行,每行描述一个矩形. 在每行中,给出矩 ...

  3. Java实现蓝桥杯日志统计

    标题:日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞" ...

  4. Java实现 洛谷 P1280 尼克的任务

    import java.util.Scanner; public class Main { public static class edg{ private int to; private int n ...

  5. java实现第一个数字

    /* 以下的静态方法实现了:把串 s 中第一个出现的数字的值返回. 如果找不到数字,返回-1 例如: s = "abc24us43" 则返回 2 s = "82445ad ...

  6. Android9.0配置charles的https抓包

    问题: 按照charles的正常流程去安装证书后,然后使用手机(一加5T,安卓9.0)访问https站点发现有些CONNECT请求无法查看,但是其它类型都支持https 解决方案: 前提条件:手机已经 ...

  7. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  8. 算法讲堂二：组合数学 & 概率期望DP

    组合数学 1. 排列组合 1. 加法原理 完成一列事的方法有 n 类,其中第 i 类方法包括\(a_i\)种不同的方法,且这些方法互不重合,则完成这件事共有 \(a_1 + a_2 + \cdots ...

  9. 深度学习在高德ETA应用的探索与实践

    1.导读 驾车导航是数字地图的核心用户场景,用户在进行导航规划时,高德地图会提供给用户3条路线选择,由用户根据自身情况来决定按照哪条路线行驶. 同时各路线的ETA(estimated time of ...

  10. javascript 面向对象学习（二）——原型与继承

    什么是原型? 首先我们创建一个简单的空对象,再把它打印出来 var example = {} console.log(example) 结果如下: { __proto__: { constructor ...