时间戳

首页 > 解决方案 > 在javascript中使用复选框选中和取消选中后，如何减少和添加不同元素的值？

javascript - 在javascript中使用复选框选中和取消选中后，如何减少和添加不同元素的值？

问题描述

当我检查它只能在 1 个元素中添加一些值，但我不知道如何从不同的元素添加并减少它。

var y = 1;

function calc() {
  if (document.getElementById("t1").checked) {
    document.getElementById("demo").innerHTML = z = y + 1;
    if (document.getElementById("t1").reversed) {
      document.getElementById("demo").innerHTML = z = y - 1;
    }
  }
  if (document.getElementById("t2").checked) {
    document.getElementById("demo").innerHTML = z = y + 1;
    if (document.getElementById("t2").reversed) {
      document.getElementById("demo").innerHTML = z = y - 1;
    }
  }
}
<input id="t1" type="checkbox" name="model" value="a1" onclick="calc();">a1
<input id="t2" type="checkbox" name="model" value="a1" onclick="calc();">a2
<h1 id="demo"></h1>

标签： javascripthtml

解决方案

这是另一种没有任何变量的方法。每次单击复选框时都会重新建立计数：

const qs=s=>document.querySelector(s),
  qsa=s=>document.querySelectorAll(s);

qs("body").addEventListener("click",ev=>ev.target.name==='model'
  ? qs('#demo').innerText=qsa('input:checked').length
  : 0);
<input id="t1" type="checkbox" name="model" value="a1">a1
<input id="t2" type="checkbox" name="model" value="a2">a2
<h1 id="demo">0</h1>

我将qs()和定义qsa()为快捷函数以提高代码的可读性。

推荐阅读