有没有更简单的方法来更新复选框价格？

Question

下面的代码很好用。然而，当我勾选一些框时，总价格将会更新，我注意到我必须为每个任务以及每个选中框的组合编码每个值。有没有一种更简单的方法，我可以写下每个任务的值，无论我勾选哪个框，它都会自动为我添加总成本？

​

function checkPrice() {
  var price = 0;

  if (document.getElementById("box-4").checked == true) {
    price = 5;
  }

  if (document.getElementById("box-5").checked == true) {
    price = 4;
  }

  if (document.getElementById("box-6").checked == true) {
    price = 5;
  }

  if (document.getElementById("box-1").checked == true) {
    price = 5;
  }

  if (document.getElementById("box-1").checked == true && document.getElementById("box-2").checked == true) {
    price = 7;
  }

  if (document.getElementById("box-1").checked == true && document.getElementById("box-3").checked == true) {
    price = 12;

  }

  if (document.getElementById("box-2").checked == true && document.getElementById("box-3").checked == true) {
    price = 10;
  }

  if (document.getElementById("box-1").checked == true && document.getElementById("box-2").checked == true && document.getElementById("box-3").checked == true) {
    price = 17;

  }

  document.getElementById("price").innerText = "Total Price: " + "$" + price;
}

<label for="bedroomcleaning">Bedroom: </label>
<br>
<input type="checkbox" id="box-4" onclick="checkPrice()">Dust all ceiling fans/light/fixtures within reach.
<br>
<input type="checkbox" id="box-5" onclick="checkPrice()"> Change sheets and/or fold clothes if requested by client.
<br>
<input type="checkbox" id="box-6" onclick="checkPrice()"> Straighten up, put toys away, make beds, fold clothes and put on bed. Straighten papers and put in a pile. DO NOT THROW AWAY ANY PERSONAL ITEMS!
<br>
<br>
<label for="bathroomcleaning">Bathroom: </label>
<br>
<input type="checkbox" id="box-1" onclick="checkPrice()"> Clean bowl and wipe down toilet cover, seat, under seat, base and behind the base.
<br>
<input type="checkbox" id="box-2" onclick="checkPrice()"> Clean all mirrors.
<br>
<input type="checkbox" id="box-3" onclick="checkPrice()"> Clean countertops and backsplashes.
<br>
<label for="bathroomprice" id="price">Total Price: </label>

​

Answer 1

使用eventListeners并遍历复选框

请注意，我已将框包装在标签中，以便您也可以单击文本。

​

function sumIt() {
  var price = 0;
  document.querySelectorAll("[id^=box]:checked").forEach(function(box) {
    price += box.checked ? 5.00 : 0;
  })
  document.getElementById("total").innerText = "$" + price.toFixed(2);
}

window.addEventListener("load", function() {
  document.querySelectorAll("[id^=box").forEach(function(box) {
    box.addEventListener("click", sumIt);
  });
})

// forEach polyfill for Edge and IE 
if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Bedroom:<br>
<label><input type="checkbox" id="box-4">Dust all ceiling fans/light/fixtures within reach.</label><br>
<label><input type="checkbox" id="box-5">Change sheets and/or fold clothes if requested by client.</label><br>
<label><input type="checkbox" id="box-6">Straighten up, put toys away, make beds, fold clothes and put on bed. Straighten papers and put in a pile. DO NOT THROW AWAY ANY PERSONAL ITEMS!</label><hr>
Bathroom:<br>
<label><input type="checkbox" id="box-1">Clean bowl and wipe down toilet cover, seat, under seat, base and behind the base.</label><br>
<label><input type="checkbox" id="box-2">Clean all mirrors.</label><br>
<label><input type="checkbox" id="box-3">Clean countertops and backsplashes.</label><br> Total Price: <span id="total"></span>

​

如果您需要不同的价格，请将它们添加为value或data-price：

​

function sumIt() {
  var price = 0;
  document.querySelectorAll("[id^=box]:checked").forEach(function(box) {
    price += box.checked ? +box.value : 0; // or +box.getAttribute("data-price")
  })
  document.getElementById("total").innerText = "$" + price.toFixed(2);
}

window.addEventListener("load", function() {
  document.querySelectorAll("[id^=box").forEach(function(box) {
    box.addEventListener("click", sumIt);
  });
})
// forEach polyfill for Edge and IE 
if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Bedroom:<br>
<label><input type="checkbox" id="box-4" value="5">Dust all ceiling fans/light/fixtures within reach.</label><br>
<label><input type="checkbox" id="box-5" value="4">Change sheets and/or fold clothes if requested by client.</label><br>
<label><input type="checkbox" id="box-6" value="5">Straighten up, put toys away, make beds, fold clothes and put on bed. Straighten papers and put in a pile. DO NOT THROW AWAY ANY PERSONAL ITEMS!</label><hr>
Bathroom:<br>
<label><input type="checkbox" id="box-1" value="5">Clean bowl and wipe down toilet cover, seat, under seat, base and behind the base.</label><br>
<label><input type="checkbox" id="box-2" value="2">Clean all mirrors.</label><br>
<label><input type="checkbox" id="box-3" value="7">Clean countertops and backsplashes.</label><br> Total Price: <span id="total"></span>

​

Answer 2

试试这个吧。简单的JS。我所做的就是将每个价格放入复选框的值中，并在javascript中获得值。很抱歉，如果定价不匹配，我只是输入了随机数。希望这能有所帮助。

​

function checkPrice() {
  var total_price = 0;
  var chosen_item = document.querySelectorAll("input:checked");
  for (var i = 0; i < chosen_item.length; i++) {
    total_price = parseInt(total_price) + parseInt(chosen_item[i].value);
  }
  document.getElementById("price").innerHTML = "Total Price:" + total_price;
}

<label for="bedroomcleaning">Bedroom: </label><br>
<input type="checkbox" id="box-4" onclick="checkPrice()" value="4">Dust all ceiling fans/light/fixtures within reach.<br>
<input type="checkbox" id="box-5" onclick="checkPrice()" value="5"> Change sheets and/or fold clothes if requested by client.<br>
<input type="checkbox" id="box-6" onclick="checkPrice()" value="6"> Straighten up, put toys away, make beds, fold clothes and put on bed. Straighten papers and put in a pile. DO NOT THROW AWAY ANY PERSONAL ITEMS!<br><br>
<label for="bathroomcleaning">Bathroom: </label><br>
<input type="checkbox" id="box-1" onclick="checkPrice()" value="1"> Clean bowl and wipe down toilet cover, seat, under seat, base and behind the base.<br>
<input type="checkbox" id="box-2" onclick="checkPrice()" value="2"> Clean all mirrors.<br>
<input type="checkbox" id="box-3" onclick="checkPrice()" value="3"> Clean countertops and backsplashes.<br>
<label for="bathroomprice" id="price">Total Price: </label>

​