<!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. 初探 ELK - 每天5分钟玩转 Docker 容器技术（89）

    在开源的日志管理方案中,最出名的莫过于 ELK 了.ELK 是三个软件的合称:Elasticsearch.Logstash.Kibana. Elasticsearch一个近乎实时查询的全文搜索引擎.E ...

  2. Java--谈一谈代理

    一.代理概念    代理在我们日常生活经常听到这个名词,比如我们想看下google我们需要找个代理服务器来帮我们一下,比如我们想买一个外国的什么东西需要在代购网站或者找朋友帮忙在外国买一下,用概念一点 ...

  3. HDU 6113 度度熊的01世界

    度度熊的01世界 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  4. Android 开发笔记___DateUtil——Time

    package com.example.alimjan.hello_world; /** * Created by alimjan on 6/30/2017. */ import java.text. ...

  5. Node.js CVE-2017-1484复现（详细步骤）

    0x00 前言 早上看Sec-news安全文摘的时候,发现腾讯安全应急响应中心发表了一篇文章,Node.js CVE-2017-14849 漏洞分析(https://security.tencent. ...

  6. 必须先将 ContentLength 字节写入请求流，然后再调用 [Begin]GetResponse。解决方法

    当在后台实现POST请求的时候,出现如下错误: 必须先将 ContentLength 字节写入请求流,然后再调用 [Begin]GetResponse. 或者是如下错误: 上述是因为由于我们使用的是代 ...

  7. 文本域、bootstrap-table显示以及MySQL三者间的换行符问题

    首先,今天在做项目的时候遇到的一个问题,如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行. 也许你马上就会想到说,用富文本编辑器,然而我们需要实现的只是文本输入以及换行功能 ...

  8. Visual Studio 2017开发环境的安装

    Visual Studio 2017是微软为了配合.NET战略推出的IDE开发环境,同时也是目前开发C#程序最新的工具,本节以Visual Studio 2017社区版的安装为例讲解具体的安装步骤. ...

  9. Snow and Rainbow

    缘分,让我们走到了一起.让这个美好的时刻美好的回忆记录在这里吧.

  10. Python之matplotlib模块安装

    numpy 1.下载安装 源代码 http://sourceforge.net/projects/numpy/files/NumPy/ 安装 python2.7 setup.py install 2. ...