这篇文章主要介绍了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
3.下方选择框点击
开关思想:当一个操作的结果只有两种状态,就可以使用布尔类型来表示这两种状态 isAllOk = true(全部选中)
1.提出假设 isAllOk = true
2.验证假设
3.根据验证结果来实现需求
//3.1遍历下方按钮,检查下方按钮的点击事件 for(var i=0;i
最后附上完整的代码:
Title
全选/全不选 | 菜名 | 商家 | 价格 |
---|---|---|---|
红烧肉 | 隆江猪脚饭 | ¥200 | |
香酥排骨 | 隆江猪脚饭 | ¥998 | |
北京烤鸭 | 隆江猪脚饭 | ¥88 | |
总结
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
以上就是JS实现点餐自动选择框(案例分析)的详细内容,更多请关注0133技术站其它相关文章!