JS实现点餐自动选择框(案例分析)


Posted in Javascript onDecember 10, 2019

效果图:

JS实现点餐自动选择框(案例分析)

1. 目标需求(一共两个):

1.点击上方全选/全不选选择框,实现对应功能
2.点击下方选择框,如果所有选择框同时被选中,则上方全选框自动变成勾选状态,否则是非勾选状态

2.思路分析:

1.实现上面选择框全选全不选功能,添加上面的鼠标点击事件,让下方所有选择框跟上方一样就行
2.下方选择框在点击时,使用开关思想来检查是否是全部都选择的状态

3.js实现步骤:

上方全选/全不选选择框,实现步骤

1.获取元素

var chkAll=document.getElementById('checkAll');
 var chkList=document.getElementsByName('check');

2.实现上方选择框全选/全不选功能

chkAll.onclick=function ( ) {
   for(var i=0;i<chkList.length;i++){
    chkList[i].checked=this.checked;
    }
 }

3.下方选择框点击

开关思想:当一个操作的结果只有两种状态,就可以使用布尔类型来表示这两种状态 isAllOk = true(全部选中)

1.提出假设 isAllOk = true
2.验证假设
3.根据验证结果来实现需求

  

//3.1遍历下方按钮,检查下方按钮的点击事件
 for(var i=0;i<chkList.length;i++){
  chkList[i].onclick=function ( ) {
   var isAllChecked=true;//假设全部都是选中状态
   for(var j=0;j<chkList.length;j++){
     if(chkList[j].checked==false){
      isAllChecked=false;
     }
    }
   //检测完毕之后,根据开关的值来设置上方选择框的状态
   if(isAllChecked==true){
    chkAll.checked=true;
   }
   else {
    chkAll.checked=false;
   }
  }
  }

最后附上完整的代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  table {
   border: 1px solid #c0c0c0;
   margin: 100px auto;
   /*margin两个值代表上下,左右*/
   text-align: center;
   width: 500px;

   border-collapse: collapse;
   /*边框合并,如果相邻,则共用一个边框*/
  }
  th{
   font:bold 15px "微软雅黑";
   background-color: #09c;
   color: #fff;
   height: 24px;
  }
  td {
   border: 1px solid #d0d0d0;
   color: #404060;
   padding: 15px;
  }
 </style>
</head>
<body>
<table>
 <!--caption是表格的标题-->
 <caption>点餐系统</caption>
 <thead>
 <tr>
  <th>
   <input type="checkbox" id="checkAll">全选/全不选
  </th>
  <th>菜名</th>
  <th>商家</th>
  <th>价格</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>
   <input type="checkbox" name="check"/>
  </td>
  <td>红烧肉</td>
  <td>隆江猪脚饭</td>
  <td>¥200</td>
 </tr>
 <tr>
  <td>
   <input type="checkbox" name="check"/>
  </td>
  <td>香酥排骨</td>
  <td>隆江猪脚饭</td>
  <td>¥998</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="check"/></td>
  <td>北京烤鸭</td>
  <td>隆江猪脚饭</td>
  <td>¥88</td>
 </tr>

 </tbody>
 <tfoot>
 <tr>
 </tr>
 </tfoot>
</table>
<script>
 //1.获取界面对应元素
 var chkAll=document.getElementById('checkAll');
 var chkList=document.getElementsByName('check');
 //2.实现上方选择框全选/全不选功能
 chkAll.onclick=function ( ) {
   for(var i=0;i<chkList.length;i++){
    chkList[i].checked=this.checked;
    }
 }
 //3.实现下方选择功能
 //3.1遍历下方按钮,检查下方按钮的点击事件
 for(var i=0;i<chkList.length;i++){
  chkList[i].onclick=function ( ) {
   var isAllChecked=true;//假设全部都是选中状态
   for(var j=0;j<chkList.length;j++){
     if(chkList[j].checked==false){
      isAllChecked=false;
     }
    }
   //检测完毕之后,根据开关的值来设置上方选择框的状态,下面也可以简写为 checkAll.checked = isAllChecked;
   if(isAllChecked==true){
    chkAll.checked=true;
   }
   else {
    chkAll.checked=false;
   }
  }
  }
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的JS实现点餐自动选择框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
js自定义input文件上传样式
Oct 26 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
原生js实现随机点餐效果
Dec 10 #Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 #Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 #Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 #Javascript
vue实现随机验证码功能(完整代码)
Dec 10 #Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 #Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
超级退弹代码
2008/07/07 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python切片知识解析
2016/03/06 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
django最快程序开发流程详解
2019/07/19 Python
python 修改本地网络配置的方法
2019/08/14 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
高中生校园生活自我评价
2013/09/19 职场文书
文言文辞职信
2015/02/28 职场文书
楚门的世界观后感
2015/06/03 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers