Question

我尝试在选中某个复选框时添加值，但它只添加第一个复选框并忽略选中的下一个复选框。例如，我选择了奶酪，然后是培根，它只添加了奶酪和培根的价值被忽略。

＆＃13;

  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);

＆＃13;

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

＆＃13;

Answer 1

您需要遍历所有选中的复选框。当您在匹配多个元素的选择器上调用.val()时，它只返回第一个匹配的值。

而不是大if/else if/...块，使用数据结构来保存价格。

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

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

使用jquery中的复选框添加值？

1 个答案: