使用jquery複選框添加值？

Question

我想添加一個特定的複選框時選擇的值，但它只增加了第一個，並忽略選中的下一個複選框。例如，我選擇了奶酪，然後選擇培根，它只添加奶酪，培根的價值被忽略。

var total = 0; 
 
    
 
    if ($("input:checkbox[name='extras']:checked").val() == "Cheese") { 
 
     total += 1.50 * 1; 
 
    } else if ($("input:checkbox[name='extras']:checked").val() == "Pepperoni") { 
 
     total += 1.50 * 1; 
 
    } else if ($("input:checkbox[name='extras']:checked").val() == "Mushrooms") { 
 
     total += 1.50 * 1; 
 
    } else if ($("input:checkbox[name='extras']:checked").val() == "Bacon") { 
 
     total += 1.50 * 1; 
 
    } else if ($("input:checkbox[name='extras']:checked").val() == "Olives") { 
 
     total += 1.50 * 1; 
 
    } 
 
    $("#ttl").html("Total Charge: $" + total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="extras" value="Cheese">Cheese 
 
    <br> 
 
    <input type="checkbox" name="extras" value="Pepperoni">Pepperoni 
 
    <br> 
 
    <input type="checkbox" name="extras" value="Mushrooms">Mushrooms 
 
    <br> 
 
    <input type="checkbox" name="extras" value="Bacon">Bacon 
 
    <br> 
 
    <input type="checkbox" name="extras" value="Olives">Olives 
 
    <br> 
 
    <br><span id="ttl"></span>

Answer 1

您需要循環所有選定的複選框。當您在匹配多個元素的選擇器上調用.val()時，它只返回第一個匹配的值。

而不是一個大的if/else if/...塊，使用數據結構來保存價格。

var prices = { 
    Cheese: 1.50, 
    Pepperoni: 1.50, 
    ... 
}; 

$(":checkbox[name=extras]:checked").each(function() { 
    total += prices[this.value]; 
});