Question

我正在创建HTML表单，并希望通过JS实现以下功能，请提供我应使用的代码。

1。添加所有选中复选框的值，并将其显示为总计。

2。添加限制，用户必须至少选择2个复选框。这是我的代码。

<input class="iput" type="checkbox" name="E33" value="4500" />
<input class="iput" type="checkbox" name="E34" value="3000" />
<input class="iput" type="checkbox" name="E36" value="6000" />

<p>Your Total is = </p>

代码也应该这样，如果我添加或删除复选框，我也不必修改JS代码。

Answer 1

假定您只有复选框类型的输入。

var checkboxes = document.getElementsByTagName('input');
var sum = 0;
checkboxes.forEach(function(checkbox){
  if (checkbox.checked) {
    sum += checkbox.value;
  }
});
console.log(sum); // your sum

Answer 2

使用document.getElementsByClassName获取所有复选框。这将提供一个集合。使用...传播算子，您可以将其转换为数组，并使用forEach对其进行循环并添加一个change事件监听器。并更新其上的change。此复选框的值为字符串，因此使用parseInt将其转换为数字

let total = 0;
[...document.getElementsByClassName('iput')].forEach(function(item) {
  item.addEventListener('change', function(e) {
    if (e.target.checked) {
      total += parseInt(e.target.value, 10)
    } else {
      total -= parseInt(e.target.value, 10)
    }
    document.getElementById('total').innerHTML = total
  })

})

<input class="iput" type="checkbox" name="E33" value="4500" />
<input class="iput" type="checkbox" name="E34" value="3000" />
<input class="iput" type="checkbox" name="E36" value="6000" />

<p id="total">Your Total is = </p>

显示所有已选中复选框的值之和

2 个答案: