<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()   //change()下面定义了
            .each(function()//使用一个函数好执行下面的事
            {
//需要聚焦判断,因此采用each来插入语句
if(bChecked) this.focus();//数量框自动聚焦
});
});
$("span[price] input[type=text]").change(function()
{//每一个数量框的值的改变都会调用这个函数
//根据单价和数量计算价格            my question!!------------------------------------->>>>>>>>>>
$(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>