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" 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" 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" 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" name="Soup" checked="checked"/>西红柿鸡蛋汤</label><label><input type="radio" name="Soup">南瓜汤</label></div></div><div id="totalPrice"></div></body></html>