<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>快餐配送页面</title>
<style>

/*快餐配送*/
div.datail{display: none;} /*对于用户不选的菜品，将其详细菜单隐藏起来*/
/*快餐配送end*/

</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>

/*思路也有写*/

//1,当用户修改复选框时，根据选择的情况对子菜单进行显隐
$(function(){
$(':checkbox').click(function(){
var bChecked=this.checked;
//如果选中则显示菜单
$(this).parent().find('.datail').css('display',bChecked?'block':'none');
//3,进一步考虑，当用户修改复选框时文本框由禁用变为可输入，并且自动聚焦。同事将文本框的值设置为1（因为之前可能填写了数字，又取消了选择），
//5.文本框从禁用到可输入的过程中应付金额也发生了变化，因此也应该计算价格，
$(this).parent().find('input[type=text]')
//每次改变选中的状态，都将值设置为1, 5,触发change事件，重新计算价格
.attr('disabled',!bChecked).val(1).change()
.each(function(){
//需要聚焦判断，因此采用each来插入语句
if(bChecked)
this.focus();
});

});
});
//2,另外，在用户没有选中复选框时，输入数量的文本框也应该禁用，因此页面加载时需要对文本框进行统一的设置，
$(function(){
$('span[price] input[type=text]')
.attr({'disabled':true,//文本框为disable
'value':'1', //表示份数的value值为1
'maxlength':'2', //最多只能输入2位数，（不提供100份以上的）
}).change(); //6，而且在加载时也应该初始化价格，让每项显示出单价，总价格显示为0，
});

//4,用户填写文本框的同时计算单独的价格以及总价格，
$(function(){
$('span[price] input[type=text]').change(function(){
//根据单价和数量计算价格
$(this).parent().find('span').text($(this).val()*$(this).parent().attr('price'));
addTotal();//计算价格
});

function addTotal(){
//计算总价格的函数
var fTotal=0;
//对选中的复选框进行遍历
$(':checkbox:checked').each(function(){
//获取每一个的数量
var iNum = parseInt($(this).parent().find('input[type=text]').val());
//获取每一个的单价
var fPrice = parseFloat($(this).parent().find('span[price]').attr('price'));
fTotal+=iNum*fPrice;
});
$('#totalPrice').html('合计￥'+fTotal+'元');
}
});

</script>

</head>
<body>
<div>
1.<input type="checkbox" id="LianCaiCheck" /><label for="LianCaiCheck">凉菜</label>
<span price='0.5'><input type="text" class="quantity" />￥<span></span>元</span>
<div class="datail">
<label><input type="radio" name="Liancai" checked="checked" />拍黄瓜</label>
<label><input type="radio" name="Liancai"/>香油豆腐</label>
<label><input type="radio" name="Liancai"/>特色水豆腐</label>
<label><input type="radio" name="Liancai"/>香芹醋花生</label>
</div>
</div>

<div>
2.<input type="checkbox" id="ShucaiCheck" /><label for="ShucaiCheck">素菜</label>
<span price='1'><input type="text" class="quantity" />￥<span></span>元</span>
<div class="datail">
<label><input type="radio" name="Shucai" checked="checked" />虎皮青椒</label>
<label><input type="radio" name="Shucai"/>酸辣土豆丝</label>
<label><input type="radio" name="Shucai"/>金钩豆芽</label>
<label><input type="radio" name="Shucai"/>香菇青菜</label>
</div>
</div>

<div>
3.<input type="checkbox" id="HuncaiCheck" /><label for="HuncaiCheck">荤菜</label>
<span price='2.5'><input type="text" class="quantity" />￥<span></span>元</span>
<div class="datail">
<label><input type="radio" name="Huncai" checked="checked" />麻辣肉片</label>
<label><input type="radio" name="Huncai"/>红烧牛柳</label>
<label><input type="radio" name="Huncai"/>糖醋里脊</label>
</div>
</div>

<div>
3.<input type="checkbox" id="RtCheck" /><label for="RtCheck">热汤</label>
<span price='2.5'><input type="text" class="quantity" />￥<span></span>元</span>
<div class="datail">
<label><input type="radio" name="Rt" checked="checked" />西红柿蛋汤</label>
<label><input type="radio" name="Rt"/>紫菜蛋汤</label>
</div>
</div>

<div id="totalPrice"></div>
</body>
</html>

效果图片：

需要的朋友可以借鉴下哦~~

实现快餐配送页面jq的更多相关文章

  1. 有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了

    写在前面 说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...

  2. Ecshop各个页面文件介绍，主要文件功能说明

    1.模板文件说明 style.css – 模板所使用样式表activity.dwt – 活动列表article.dwt – 文章内容页article_cat.dwt – 文章列表页article_pr ...

  3. ecshop程序结构说明

    文件夹说明 名称 备注(作用或意义) 根目录 前台程序文件 admin 后台程序文件 admin/help 功能的帮助文件 admin/images 后台页面用图片 admin/includes 后台 ...

  4. ecshop常用语句

    ecshop之中的IF语句: <select name="product_cat" id="product_cat" class="form-c ...

  5. ecshop在线手册前言及程序结构

    该在线手册是有模版堂转载而来:仅供参考 一.前言 为什么我们ecshop模板堂要重制ecshop在线手册呢?因为目前网上的一些教程有些是比较老的,有些是不全面的,官方的手册也已经很久没有更 新,很多刚 ...

  6. 子tab里面新增tab（top.jQuery）

    top.jQuery应用. var jq = top.jQuery; if (jq("#centre").tabs("exists", "预览页面&q ...

  7. cookie记录

    登录页面引用: <script src="/jquery.cookie.js"></script> 登录页面jq: var telphone = $('[n ...

  8. node -- express框架

    express node的一个框架 安装express cnpm install express -S 引入 const express = require("express"); ...

  9. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

随机推荐

  1. 【Win 10 应用开发】UI Composition 札记（二）：基本构件

    在上一篇中,老周用一个示例,演示了框架视图的创建过程,在本篇中,老周将给大伙伴们说一下 Composition 构建 UI 的一些“零件”. UI Composition 有一个核心类——对,就是 C ...

  2. SharePoint Server 2013 安装篇 - 如何解决无法找到 .net 4.5 的问题

    SharePoint Server 2013 在安装前,是不能安装 VS 等会自动安装 .net 4.5.x 以上版本的 .net Framework 的软件的.因为安装了 .net Framewor ...

  3. android版火狐调试器

    Remotely debugging Firefox for Android 使用火狐开发工具可以在桌面上进行远程代码的调试(FF26以上) 具体使用参考: https://developer.moz ...

  4. 单元测试框架 unittest 的运行方法if __name__ == '__main__': unittest.main()

    1. if __name__ == '__main__': unittest.main()2. 测试用例实例根据测试的特点分组在一起. unittest为此提供了一个机制:测试套件由unittest' ...

  5. JS中的this的应用总结

    简述this的用法 "this是由被调用的方式确定"这个事实,使得this可以被改变,从而为函数增加了动态性,可变性,使得变成更加灵活.目前因为工作经验有限,暂时总结一下五种情况下 ...

  6. Python学习笔记整理总结【语言基础篇】

    一.变量赋值及命名规则① 声明一个变量及赋值 #!/usr/bin/env python # -*- coding:utf-8 -*- # _author_soloLi name1="sol ...

  7. C# TabControl标签的隐藏

    当你想要隐藏的时候 if (this.tabMain.TabPages[ "tabpageThePage "] != null) { this.tabMain.TabPages.R ...

  8. MarkdownPad2使用高亮插件

    MarkdownPad 2有插入代码块的功能,但样式却不尽人意,但又不想换个编辑器,找了挺多相关资料,最后在MarkdownPad 2集成prettify高亮插件. 如下相关资料: [HTML] Pr ...

  9. 启用 Brotli 压缩算法，对比 Gzip 压缩 CDN 流量再减少 20%

    Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此在 2015 年 9 月 Google 推出了无损压缩算法 Brotli.Brotli 通过变种的 LZ77 算 ...

  10. 父类清除浮动的原因、（清除浮动代码，置于CSS中方便调用）

    浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现.但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题: 1.浮动的元素会 ...