Question

为什么，我不能用。我想检查以可视化所选复选框之间的总和。例如，如果我只检查第一个，则显示一个值，另一个显示另一个值；如果我同时选中这两个值，则为总和。

感谢您的帮助

<div>
<input type="checkbox" id="checkvalnotset1" value="45" onClick="sumvalnotset()"> this is a checkbox that gain value when checked
	<input type="checkbox" id="checkvalnotset2" value="20" onClick="sumvalnotset()"> this is a checkbox that gain value when checked
<p id="sumvalnotset">the value is 0</p>
<script>
function setvalue(x){
	if(x.checked){
		x.value = x.defaultValue;
	} else {
		x.classList.value = 0;
	}
	return x.value;
}
var a = setvalue(document.getElementById("checkvalnotset1"));
var b = setvalue(document.getElementById("checkvalnotset2"));
var p = document.getElementById("sumvalnotset");

function sumvalnotset(){
p.innerHTML = "the value is " + +a + +b
}
</script>
</div>

Answer 1

var sum = 0;

function sumvalnotset(event) {
  if(event.checked) {
    sum = sum + parseInt(event.value);
  } else {
    sum = sum > 0 ? sum - parseInt(event.value) : sum;
  }
  
  document.getElementById('sumvalnotset').innerText = 'the value is: '+ sum;
}

<div>
<input type="checkbox" id="checkvalnotset1" value="45" onClick="sumvalnotset(this)" onchange=""> this is a checkbox that gain value when checked
	<input type="checkbox" id="checkvalnotset2" value="20" onClick="sumvalnotset(this)"> this is a checkbox that gain value when checked
<p id="sumvalnotset">
   the value is: 0
</p>

</div>

Answer 2

您可以重写事件处理程序，如下所示：

<div>
<input type="checkbox" id="checkvalnotset1" value="45" onClick="sumvalnotset()"> this is a checkbox that gain value when checked
<input type="checkbox" id="checkvalnotset2" value="20" onClick="sumvalnotset()"> this is a checkbox that gain value when checked
<p id="sumvalnotset">the value is 0</p>
<script>
function sumvalnotset() {
  var chk1 = document.getElementById("checkvalnotset1");
  var chk2 = document.getElementById("checkvalnotset2");
  var val1 = chk1.checked ? Number(chk1.value):0;
  var val2 = chk2.checked ? Number(chk2.value):0;
  var p = document.getElementById("sumvalnotset");
  p.innerHTML = "the value is " + (val1 + val2);
}
</script>
</div>

得到两个复选框的总和

2 个答案: