📄 11-31.html

📁 文件是《精通Javascript+jQuery》的书中实例
💻 HTML
字号:
<!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 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+"元");
}
$(function(){
	$(":checkbox").click(function(){
		var bChecked = this.checked;
		//如果选中则显示子菜单
		$(this).parent().find(".detail").css("display",bChecked?"block":"none");
		$(this).parent().find("input[type=text]")
			//每次改变选中状态，都将值重置为1，触发change事件，重新计算价格
			.attr("disabled",!bChecked).val(1).change()
            .each(function(){
				//需要聚焦判断，因此采用each来插入语句
				if(bChecked) this.focus();
			});
	});
	$("span[price] input[type=text]").change(function(){
		//根据单价和数量计算价格
		$(this).parent().find("span").text( $(this).val() * $(this).parent().attr("price") );
		addTotal();	//计算总价格
	});
	//加载页面完全后，统一设置输入文本框
	$("span[price] input[type=text]")
		.attr({	"disabled":true,//文本框为disable
				"value":"1",	//表示份数的value值为1
				"maxlength":"2"	//最都只能输入2位数（不提供100份以上）
		}).change();			//触发change事件，让span都显示出价格
});
</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>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -