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中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
原生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
php的控制语句
2006/10/09 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP fclose函数用法总结
2019/02/15 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python实现单词拼写检查
2015/04/25 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
浅析python继承与多重继承
2018/09/13 Python
python动态进度条的实现代码
2019/07/03 Python
python实现飞船大战
2020/04/24 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
退休教师欢送会主持词
2014/03/31 职场文书
通信工程求职信
2014/07/16 职场文书
廉政教育的心得体会
2014/09/01 职场文书