Question

我在html中有这段代码

<input type="checkbox" value="12" id="logo" checked onchange="calculate(this);">
<input type="checkbox" value="19" id="bc" checked onchange="calculate(this);">
<input type="checkbox" value="200" id="first" onchange="calculate(this);">
<input type="checkbox" value="250" id="second" onchange="calculate(this);">

<p id="total"></p>

然后是js

var total = 0;

function calculate(option) {
    if (option.checked) {
        total += Number(option.value);
    } else {
        total -= Number(option.value);
    }
    document.getElementById("total").innerHTML = total;
}

我需要前两个checked复选框，以便在页面加载时从头开始总结并且在js的行为之后，当我分别取消选中

时，将我转到0或总共复选框

Answer 1

您可以在页面加载中添加一个eventlistener，只需使用querySelectorAll("input[type=checkbox]")选择选项，选择所有复选框，迭代它们并总结它们。

＆＃13;

var total = 0;

function calculate(option) {
  if (option.checked) {
    total += Number(option.value);
  } else {
    total -= Number(option.value);
  }
  document.getElementById("total").innerHTML = total;
}

window.addEventListener("load", function() {
  var options = document.querySelectorAll("input[type=checkbox]");
  for (var i = 0; i < options.length; i++) {
    const o = options[i];
    if (o.checked) total += Number(o.value);
  }
  document.getElementById("total").innerHTML = total;
}, false);

＆＃13;

<input type="checkbox" value="12" id="logo" checked onchange="calculate(this);">
<input type="checkbox" value="19" id="bc" checked onchange="calculate(this);">
<input type="checkbox" value="200" id="first" onchange="calculate(this);">
<input type="checkbox" value="250" id="second" onchange="calculate(this);">

<p id="total"></p>

＆＃13;

Answer 2

要达到预期的结果，请使用初始标记检查初始页面加载和checkTotal函数来检查初始加载时的框

步骤：

功能checkedTotal检查所有选中的复选框，并使用布尔值start
如果start为true，则仅添加选中的复选框值并限制计算函数enter code here

代码示例 - https://codepen.io/nagasai/pen/XEyqEd?editors=1111

var total = 0;

function calculate(option,start) {
    if (option.checked) {
        total += Number(option.value);
    } else {
        if(!start){
        total -= Number(option.value);
        }
    }
  
    document.getElementById("total").innerHTML = total;
}

function checkedTotal(){
  var checkList = document.getElementsByTagName('input');
  for(var i =0; i < checkList.length; i++){
     calculate(checkList[i], true)
  }
}

checkedTotal()

<input type="checkbox" value="12" id="logo" checked onchange="calculate(this);">
<input type="checkbox" value="19" id="bc" checked onchange="calculate(this);">
<input type="checkbox" value="200" id="first" onchange="calculate(this);">
<input type="checkbox" value="250" id="second" onchange="calculate(this);">

<p id="total"></p>

Answer 3

您可以调用该函数，然后调用函数onchange事件。不要将this作为参数传递

＆＃13;

    function calculate() {
      total = 0;
      elements = document.getElementsByTagName('input');
      for (let i = 0; i < elements.length; i++) {
        if (elements[i].checked) {
          total += Number(elements[i].value); 
        }
      }
      document.getElementById('total').innerHTML = total;
    }
    calculate();

＆＃13;

  <input type="checkbox" value="12" id="logo" checked onchange="calculate();">
  <input type="checkbox" value="19" id="bc" checked onchange="calculate();">
  <input type="checkbox" value="200" id="first" onchange="calculate();">
  <input type="checkbox" value="250" id="second" onchange="calculate();">

  <p id="total"></p>

＆＃13;

Answer 4

使用课程：

<input type="checkbox" value="12" id="logo" class='summary' checked>
<input type="checkbox" value="19" id="bc" class='summary' checked>
<input type="checkbox" value="200" id="first" class='summary'>
<input type="checkbox" value="250" id="second" class='summary'>

document.addEventListener('DOMContentLoaded', function() {
    var summerizers = document.querySelectorAll('.summary'),
        counter = document.getElementById('counter');

    for (var i = 0, c = summerizers.length; i < c; i++) {
        summerizers[i].addEventListener('change', count);
    }

    count();

    function count() {
        var total = 0;

        for (var i = 0, c = summerizers.length; i < c; i++) {
            if (summerizers[i].checked) {
                total += parseInt(summerizers[i].value, 10);
            }
        }

        counter.value = total;
    }

});

https://jsfiddle.net/r1khjrsd/

在js中总结，选中了2个选项

4 个答案: