<!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. swift 之函数式编程（一）

    1. 什么是函数式编程? 函数式编程是阿隆佐思想的在现实世界中的实现, 它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及异变物件. 函数式编程的最重要基础是λ演算.而且λ演算的函數可以接受函 ...

  2. 编程&blog处女篇-用C#求100以内的质数

    using System;namespace Loops{ class Program { static void Main(string[] args) { /*局部变量定义*/ int i, j; ...

  3. js判断值为null

    今天在做项目的时候,犯了一个着实不应该的错误,拿到data为null,然后判断如果为null执行A,否则执行B 我错误的代码是 if(data===null){ A; }else{ B; } 怎么调试 ...

  4. [Scikit-learn] 4.4 Dimensionality reduction - PCA

    2.5. Decomposing signals in components (matrix factorization problems) 2.5.1. Principal component an ...

  5. linux学习（五）系统目录结构，ls命令，文件类型，alias

    一.系统目录结构 在我们的根目录下,有这样一些文件夹 /bin /sbin /usr/bin /usr/sbin /sbin一般都是root用户用的 /boot 系统启动相关的,grup就放在这里,这 ...

  6. .Net高级进阶，在复杂的业务逻辑下，如何以最简练的代码，最直观的编写事务代码？

    本文将通过场景例子演示,来通俗易懂的讲解在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码. 通过一系列优化最终达到两个效果,1.通过代码块来控制事务(分布式事务),2.通过委托优化Tran ...

  7. Linux安装nginx代理服务器

    Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...

  8. thinkphp后台ajaxReturn提示下载的问题

    thinkphp新版设置了ajaxreturn方法如果是JSON格式会自动设置头信息为JSON格式,这样做在谷歌下可以正常解析,但是在IE和OPERA浏览器下就会提示下载,从而导致程序出错,修改方法如 ...

  9. JavaScript系列----一切皆是对象

    1.判断对象类型 1.1.typeof 运算符 首先要认识到,typepof是一个运算符,其运算需要一个参数,返回值是参数的类型. typeof使用方法 typeof parameter //使用方法 ...

  10. ASP.NET Core集成现有系统认证

    我们现在大多数转向ASP.NET Core来使用开发的团队,应该都不是从0开始搭建系统,而是老的业务系统已经在运行,ASP.NET Core用来开发新模块.那么解决用户认证的问题,成为我们的第一个拦路 ...