返回列表 發帖

jQuery 餐點功能

本帖最後由 tingchen0329 於 2016-10-24 00:14 編輯

想請教各位大大   我的問題在一個小點上   我想要把SPAN裡的價格加總到 div id="dishPrice"(橘色區)裡面 前提要選取下方的checkbox(咖啡色區)才可計算 我的Javascript (紅色區)該怎麼改    我改了10多趟還是無法    可以讀出數字

   <!--顯示已選擇多少餐點及多少金額-->
  <div id="dishCheck">
  
  </div>
  <div id="dishPrice" align="right">
  0
  
  </div>

        <div data-role="collapsibleset" data-inset="true" id="collapsiblesetForFilter">
                <div data-role="collapsible">
                <h3>漢堡類</h3>
        
        <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox" id="checkboxA1" class="cc" >
                        <label for="checkboxA1"><div style="float:left">漢堡蛋</div><div style="float:right"><span>30</span>元</div></label>
          <input type="checkbox" name="checkbox" id="checkboxA2" class="cc" >
            <label for="checkboxA2"><div style="float:left">香雞堡</div><div style="float:right"><span>40</span>元</div></label>
        </fieldset>
                </div>
                <div data-role="collapsible">
                <h3>三明治類</h3>
                <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox" id="checkboxB1" class="cc">
                <label for="checkboxB1">培根三明治</label>
                                <input type="checkbox" name="checkbox" id="checkboxB2" class="cc">
                                <label for="checkboxB2">火腿三明治</label>
             </fieldset>
                </div>
        
                <div data-role="collapsible">
                <h3>蛋餅類</h3>
        <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox" id="checkboxC1" class="cc">
            <label for="checkboxC1">鮪魚蛋餅</label>
        </fieldset>
                </div>
                <div data-role="collapsible">
                <h3>吐司類</h3>
        <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox" id="checkboxD1" class="cc">
            <label for="checkboxD1">巧克力厚片</label>
        </fieldset>
                </div>

                <div data-role="collapsible">
                <h3>飲料類</h3>
        <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox" id="checkboxE1" class="cc">
            <label for="checkboxE1">可樂_大</label>
        </fieldset>
                </div>
                </div>
        </div>
    <div data-role="footer">
        </div>
</div>

<script>
var priceTotal = 0;
//把Checkbox的<label> 的菜單名 讀取放在<div> dishCheck裡並把<span>內的金額加總在<div> dishPrice裡
$(document).on("change", '.cc', function(event){
        $('#dishPrice').empty();
        $('#dishCheck').empty();
        $('.cc').each(function(){
                if($(this).prop("checked")){
                        $('#dishCheck').append('<span>'+$('label[for='+ $(this).attr('id') +']').text()+'+'+'</span>');
                        $('#dishPrice').append(priceTotal);
                priceInt =parseInt($('label[for='+ $(this).attr('id') +']').find( "span" ).text());
                priceTotal = priceTotal + priceInt;
               
                        alert(priceInt);

                }
       

        });//cc.each function()
});//document
</script>

返回列表 回復 發帖