Question

我对JavaScript非常陌生，所以一步一步的回答将不胜感激。现在，我的代码已经设置好了，所以当您单击“提交”按钮时，它会显示总计，但我希望仅通过选中复选框就可以自动更新总计，而根本没有提交按钮。

function calcTotal()
{
  var itemTotal = 0;
  var items = document.getElementsByTagName("input");
  for (var i = 0; i < 5; i++) {
    if (items[i].checked){
      itemTotal += parseInt(items[i].value);
    }
  }
  document.getElementById("total").innerHTML = "Your order total is $" + itemTotal +".00";
}
var submitButton = document.getElementById("sButton");
submitButton.addEventListener("click", calcTotal);

Answer 1

键正在侦听输入元素上的input事件，而不是按钮元素上的click事件。

其他注释，如果可能的话：

在JS中使用单引号，在HTML中使用双引号
使用let或const代替var
当您需要将一组值数组减少成单个值（例如计算总和）时，不要重造.reduce。
使用模板字符串（例如`y: ${y}`）而不是串联字符串（例如"y: " + y）。

let inputs = [...document.querySelectorAll("input")];

let calcTotal = () => {
  let sum = inputs.reduce((sum, input) => sum + (input.checked ? parseInt(input.value) : 0), 0);
  document.querySelector("#total").textContent = `Your order total is $${sum}.00`;
};

inputs.forEach(input => input.addEventListener('input', calcTotal));

<label><input type="checkbox" value=30>$30 hamburger</label>
<label><input type="checkbox" value=45>$45 french fries</label>
<label><input type="checkbox" value=1>$1 cola</label>
<label><input type="checkbox" value=60>$60 parking</label>
<label><input type="checkbox" value=20>$20 cookie</label>
<label><input type="checkbox" value=290>$290 large cookie</label>
<div id="total"></div>

Answer 2

实际上，您需要绑定Checkbox的事件change，而不是表单提交按钮click。无论何时通过选中或取消选中复选框来更改复选框的值，它都会调用函数calcTotal()来更新该值。

以下是更新的Javascript代码：

function calcTotal()
{
  var itemTotal = 0;
  var items = document.getElementsByTagName("input");
  for (var i = 0; i < 5; i++) {
    if (items[i].checked){
      itemTotal += parseInt(items[i].value);
    }
  }
  document.getElementById("total").innerHTML = "Your order total is $" + itemTotal +".00";
}
var checkBoxItems = document.getElementsByTagName("input");
checkBoxItems.addEventListener("change", calcTotal);

希望它会对您有所帮助。

Answer 3

只需将更改事件添加到每个复选框。当您切换选中状态时，请抓住:checked复选框重新计算总数。

Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(chk => {
  chk.addEventListener('change', recalculateTotal);
});

function recalculateTotal() {
  let total = Array.from(document.querySelectorAll(':checked')).reduce((sum, chk) => {
    return sum + parseInt(chk.value, 10);
  }, 0);
  document.getElementById('total').innerHTML = '$' + total.toFixed(2);
}

label { display: inline-block; margin-right: 1em; }
div { margin-top: 1em; }

<label>$1 <input type="checkbox" value="1" /></label>
<label>$10 <input type="checkbox" value="10" /></label>
<label>$100 <input type="checkbox" value="100" /></label>
<div>Your order total is: <span id="total">$0.00</span></div>

没有提交按钮如何自动显示总计？

3 个答案: