<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>快餐在线</title>
<style type="text/css">
<!--
body{
padding:0px;
margin:165px 0px 0px 160px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
background:#000000 url(bg2.jpg) no-repeat;
}
body > div{
margin:5px; padding:0px;
}
div.detail{
display:none;
margin:3px 0px 2px 15px;
}
div#totalPrice{
padding:10px 0px 0px 280px;
margin-top:15px;
width:85px;
border-top:1px solid #FFFFFF;
}
input{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
input.quantity{
border:1px solid #CCCCCC;
background:#3f1415; color:#FFFFFF;
width:15px; text-align:center;
margin:0px 0px 0px 210px
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(":checkbox").click(function(){
var isDisplay = this.checked;
//如果选中则显示子菜单
$(this).parent().find(".detail").css("display",isDisplay?"block":"none");
//每次改变选中状态，都将值重置为1，触发change事件，重新计算价格
$(this).parent().find("input[type=text]").attr("disabled",!isDisplay).val(1).change().each(function(){
if(isDisplay) this.focus();
})
});
$("span[price] input[type=text]").change(function(){
//根据单价和数量计算价格
$(this).parent().find("span").text($(this).parent().attr("price") * $(this).val());
//加载计算总价格函数
addTotal();
});
//加载页面后，统一设置文本框
$("span[price] input[type=text]").attr({"disabled":true,"value":"1","maxlength":"2"}).change();
});
function addTotal(){
//计算总价格的函数
var sum = 0;
//对选中的复选框计算价格
$(":checkbox:checked").each(function(){
//获取每一个数量
var num = parseInt($(this).parent().find("input[type=text]").val());
//获取每一个的单价
var price = parseFloat($(this).parent().find("span[price]").attr("price"));
sum += num * price;
});
$("#totalPrice").html("合计￥" + sum + "元");
}
</script>
</head>
<body>
<div>
1. <input type="checkbox" id="LiangCaiCheck"><label for="LiangCaiCheck">凉菜</label>
<span price="0.5"><input type="text" class="quantity"> ￥<span></span>元</span>
<div class="detail">
<label><input type="radio" name="LiangCai" checked="checked">拍黄瓜</label>
<label><input type="radio" name="LiangCai">香油豆角</label>
<label><input type="radio" name="LiangCai">特色水豆腐</label>
<label><input type="radio" name="LiangCai">香芹醋花生</label>
</div>
</div>
<div>
2. <input type="checkbox" id="SuCaiCheck"><label for="SuCaiCheck">素菜</label>
<span price="1"><input type="text" class="quantity"> ￥<span></span>元</span>
<div class="detail">
<label><input type="radio" name="SuCai" checked="checked">虎皮青椒</label>
<label><input type="radio" name="SuCai">醋溜土豆丝</label>
<label><input type="radio" name="SuCai">金勾豆芽</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="detail">
<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>
4. <input type="checkbox" id="SoupCheck"><label for="SoupCheck">热汤</label>
<span price="1.5"><input type="text" class="quantity"> ￥<span></span>元</span>
<div class="detail">
<label><input type="radio" name="Soup" checked="checked"/>西红柿鸡蛋汤</label>
<label><input type="radio" name="Soup">南瓜汤</label>
</div>
</div>
<div id="totalPrice"></div>
</body>
</html>
分享到：
相关推荐
**jQuery 页面文档及实例** jQuery 是一个高效、简洁且易用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。本篇内容将深入讲解jQuery的核心概念，通过丰富的实例帮助你理解和掌握这...
教程名称：王兴魁jQuery实战系列视频课程目录：【】CSDN ITCAST王兴魁jQuery参考代码及PDF课件【】JQuery实战第一讲：概述、环境准备及入门实例【】JQuery实战第三讲：横向纵向菜单【】JQuery实战第二讲：可以编辑的...
jQuery tip cards插件用法实例：鼠标滑过翻转，比较集成的一个效果吧，不但是提示效果，还有焦点图切换特效，还有些文字和图片特效，可以自己整理下，用在自己的网页上，提示一下，请运行于支持HTML5的浏览器中。
在“jQuery实战第一讲：概述、环境准备及入门实例”中，我们将介绍jQuery的基本概念，包括其设计哲学和主要功能。学习如何在网页中引入jQuery库，理解$符号的作用，并通过简单的DOM选择和操作实例，快速上手jQuery。...
这个实例展示了Jquery的强大功能，以及如何结合JavaScript（JS）来创建交互式的网页元素，提升用户体验。 首先，我们要理解Jquery是什么。Jquery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
《JQuery实战》实例源码是一份集合了多个基于JQuery技术实现的Web前端功能的代码资源，适合正在学习或已经掌握了JQuery基础的开发者参考和实践。这些实例涵盖了从基本操作到复杂交互的多种场景，有助于提升对JQuery...
JQuery实战第一讲：概述、环境准备及入门实例SRC,基础课程，大家学习一下，后续还有更多
本篇文章将深入探讨jQuery AJAX分页的原理与实践，通过具体的实例来展示如何实现炫酷的分页功能。 首先，理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容。...
这是一个利用了Ajax技术的一个Jquery实例，动态的生成级联的下拉列表框，在中关村zol中经常可以看到。如果遇到无法显示的情况，请自己阅读代码。
本教程将深入探讨如何利用jQuery实现页面元素的动态显示和控制，帮助你掌握这一核心技能。 首先，我们来看jQuery的基础入门。在“JQuery实战第一讲：概述”中，你会学习到jQuery的基本概念、如何引入jQuery库，以及...
jQuery开发交互效果页面--手机号抽奖 jQuery是目前最流行的JavaScript库之一，广泛应用于Web前端开发中。通过本次实训，我们将学习如何使用jQuery开发一个交互效果页面--手机号抽奖。 知识点1： jQuery下载和引入...
**jQuery登录页面模板详解** 在前端开发中，创建一个吸引用户、操作便捷的登录页面是至关重要的。"漂亮精美的JQuery登录页面模版"提供了一套完整的解决方案，旨在帮助开发者快速构建美观的用户登录界面。这个模版...
参照《jQuery完全攻略》亲自手打并测试的100多个实例（部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法）。 主要分为： jQuery操作DOM节点、数组和字符串 jQuery表单验证 ...
在本教程中，我们将探讨“jQuery 多种弹出窗口实例”，学习如何创建交互式弹出窗口，并实现点击页面其他位置时窗口自动隐藏的功能。 首先，让我们了解弹出窗口的基本概念。弹出窗口是网页设计中常用的一种交互元素...
本篇文章将深入探讨jQuery的使用，并通过一系列实例来帮助理解其核心概念和功能。 首先，jQuery的核心理念是“Write Less, Do More”，即用更少的代码实现更多的功能。它提供了丰富的API接口，涵盖了DOM操作、事件...
尤其在处理网页元素的可见性问题上，jQuery提供了强大的过滤器来帮助开发者灵活地选取和操作页面元素。在本文中，我们将详细介绍jQuery中的可见性过滤器：hidden和：visibility的用法，并结合实例来分析它们的功能和...
此实例包含三个：jquery.ganttView-master、mbielanczuk-jQuery.Gantt-v1.1.0、thegrubbsian-jquery.ganttView-0.8.2.0
《jQuery经典实例60例-动画实例》是学习jQuery库中动画效果的宝贵资源，它涵盖了从基础到高级的各种动画技巧。jQuery库以其简洁、强大的API而闻名，尤其是在处理页面元素的动态展示和动画效果方面。以下将详细介绍...
在这个"JavaScript+jQuery网页特效设计实例源码"的压缩包中，我们很可能会找到一系列实用的代码示例，帮助开发者理解和实现各种网页特效。 JavaScript，作为一种轻量级的解释型编程语言，被广泛应用于浏览器端，...
教程名称：jQuery实例视频教程课程目录：【】jQuery实例-商城放大镜效果【】jQuery实例-图片放大效果【】jQuery实例-图片转动立体效果【】jQuery实例-对联广告【】jQuery实例-返回顶部(解决IE6固定定位)【】jQuery...