<!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控制页面(三)实例:快餐配送页面
最新推荐文章于 2022-12-01 22:09:53 发布