思路：全选按钮和子按钮分开考虑，当全选按钮选中的时候，也就是其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 645 错误的集合（暴力）

    645. 错误的集合 集合 S 包含从1到 n 的整数.不幸的是,因为数据错误,导致集合里面某一个元素复制了成了集合里面的另外一个元素的值,导致集合丢失了一个整数并且有一个元素重复. 给定一个数组 n ...

  2. java实现子集和问题

    1 问题描述 求n个正整数构成的一个给定集合A = {a1,a2,a3,-,an}的子集,子集的和要等于一个给定的正整数d.请输出所有符合条件的子集. 2 解决方案 2.1 全排列思想求解 方法1:首 ...

  3. java实现第六届蓝桥杯移动距离

    移动距离 题目描述 X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3- 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1 2 3 ...

  4. 【Spring注解驱动开发】组件注册-@ComponentScan-自动扫描组件&指定扫描规则

    写在前面 在实际项目中,我们更多的是使用Spring的包扫描功能对项目中的包进行扫描,凡是在指定的包或子包中的类上标注了@Repository.@Service.@Controller.@Compon ...

  5. Vue好书推荐

    1.Vue.js实战 从基础知识到ui组件封装和剖析,层层推进,最后两个案例实战.适合零基础入门,学完可就业.(推荐看这本) 交流地址(pdf原件):链接(点击跳转):提取码:7IsG 2.vue.j ...

  6. intput子系统

    1.按键驱动程序的第一个版本:day07/04      //内核模块的基本要求   init.h module.h LICENSE      struct cdev btn_cdev;      b ...

  7. PyQt5 对话框示例

    import sys from PyQt5.QtWidgets import * from PyQt5.QtGui import * class Example(QMainWindow): def _ ...

  8. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  9. 如何安装 Sublime text 编辑器相关的插件

    Sublime是一个伟大的编辑器,具有可靠的基础功能,使编写代码变得愉快.您可以安装一个包管理器,以便于安装插件和添加新功能. 为什么使用包管理器(package manager) 包管理器可以方便地 ...

  10. 如何控制excel单元格录入相同内容的次数？

    我们知道如果要用Excel制作让人规范填写的模板,数据有效性,Excel2013版本及以上叫数据验证是必学的技能,正好这个案例可以讲讲数据有效性的一种“高级”设置方法. 加入我们需要实现下面的要求,价 ...