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>

如果您需要其他价格，请将它们添加为价值或数据价格：

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>

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

2 个答案: