jQuery统制页面（三）实例：快餐配送页面 _Web前端

jQuery控制页面（三）实例：快餐配送页面
<!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>