jQuery的：多個複選框選擇和價格確定

Question

我試圖建立一個「數字早餐/中餐/晚餐名單」，其中2周以上的空間父母可以選擇他們的孩子是否需要吃早餐，午餐和/或晚餐。這些值將乘以每餐的不同費率以確定發票金額。父母點擊提交按鈕，返回總價值。下面是我到目前爲止有：

Web窗體：

<input type="checkbox" name="breakfast"> 
<input type="checkbox" name="lunch"> 
<input type="checkbox" name="dinner"> 

有14天，如此反覆每個。所以總共有42個複選框。

的jQuery：

var numBreakfast = $("input:checkbox[name='breakfast']").size(); 
var numLunch = $("input:checkbox[name='lunch']").size(); 
var numDinner = $("input:checkbox[name='dinner']").size(); 

var totalPrice = numBreakfast * priceBreakfast + numLunch * priceLunch + numDinner * priceDinner 

我想我已經得到了這個正確的，但是當我打電話總我不斷收到$ 0.00包裝返回。

任何想法？

Answer 1

試試這個實際上指望有多少項目進行了檢查：

var numBreakfast = $('input:checkbox[name=breakfast]:checked').length; 
// same with all the others 

注意使用length代替size()因爲後來已被棄用。

Answer 2

function calculate(){ 
var numBreakfast = $("input:checkbox[name='breakfast']"),numBreakfastCount=0 
numLunch = $("input:checkbox[name='lunch']"), numLunchCount=0; 
numDinner = $("input:checkbox[name='dinner']"),numDinnerCount=0, 
priceDinner=2.00,priceLunch=3.00,priceBreakfast=5.00; 

for(i=0;i<numBreakfast.length;i++){ 
    if(numBreakfast[i].checked == true){ 
     numBreakfastCount++ 
    } 
} 

for(i=0;i<numLunch.length;i++){ 
    if(numLunch[i].checked == true){ 
     numLunchCount++ 
    } 
} 

for(i=0;i<numDinner.length;i++){ 
    if(numDinner[i].checked == true){ 
     numDinnerCount++ 
    } 
} 

var totalPrice = (numBreakfastCount * priceBreakfast) + (numLunchCount * priceLunch) + (numDinnerCount * priceDinner); 
console.log(totalPrice); 
} 

Answer 3

使用length而不是size。

$('input:checkbox[name="breakfast"]:checked').length會給你籤「早餐」盒子計數。

這裏有一個工作示例：

http://jsfiddle.net/senoramor/5qymM/1/