jquery实例

<script type="text/javascript"> 
$(fn(){
$(: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(this.checked)(

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>





<div>  
<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>  
<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>  
 <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>  
<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>