<!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. angular控制器常用的4种通信方式

    首先概括一下angular控制器通信的4种方式: 作用域继承. 通过$scope广播事件. 事件发射器模块. 服务. 1.作用域的继承 子作用域可以访问声明在它们的祖先作用域中的变量和函数. < ...

  2. Java中的类变量、实例变量、类方法、实例方法的区别

    类变量:形如static int a; 顾名思义,类变量可以理解为类的变量,类变量在类加载的时候就已经给它分配了内存空间,不同于实例变量(int a; ),实例变量是在该类创建对象的时候分配内存的.并 ...

  3. 基于JQuery EasyUI的WebMVC控件封装(含源码)

    JQuery EasyUI类库,大家不会陌生,出来已经有很多年了.个人感觉还是很好用的,作者更新频率也很快,bug也及时修复. 最近在整理以前的代码,找到了这个组件,它是将EasyUI组件封装成MVC ...

  4. Android 开发笔记___alertDialog

    public class AlertActivity extends AppCompatActivity implements OnClickListener { private TextView t ...

  5. javascript中的变量、作用域和内存问题

    1.变量 变量的值的类型:基本类型值和引用类型值两种. 基本类型:Undefined.Null.Boolean.String.Number,这五类基本数据类型的值在内存中占有固定大小的空间,因此保存在 ...

  6. HTML5 设备上的API

    一.Vibration API ,接受两种类型参数 vibrate (unsigned long time)   当参数是unsigned long的时候 此时参数表示震动时间.  NotSuppor ...

  7. Webpack打包构建太慢了？试试几个方法

    Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...

  8. Postman参数化使用以及中文乱码问题解决

    1.参数化详解 准备工作,数据准备 2.使用csv文件时中文乱码可以通过使用txt文本,json文本改变调用json文件改变文件的编码格式解决 3:参数化数据调用的两种方式通过调用读取文件传入环境变量 ...

  9. Linux系列教程（十九）——Linux文件系统管理之手工分区

    上篇博客我们首先介绍了硬盘为什么要分区,以及Linux系统的几种分区类型,然后介绍了Linux系统几个常用的文件系统命令,最后讲解了挂载命令,并通过实例演示了如何挂载光盘和U盘. 本篇博客我们将介绍l ...

  10. Maven中settings.xml的配置项说明精讲

    1.Maven的配置文件(Maven的安装目录/conf/settings.xml ) 和 Maven仓库下(默认的Maven仓库的是用户家目录下的.m2文件,可以另行制定)的settings.xml ...