Question

我正在研究某种计算器，并且假设我有一个名为IQ的全局变量。现在，我有一个带有5个选项的复选框（在这种情况下是5个不同的人）。我希望每个人在选择时减少或增加全局变量IQ。

我想用if语句做这个，但如果第一个if是真的怎么办（即一个人被检查并且值=== person）。然后代码将停止正确而不检查其他if语句以查看是否选择了更多人/复选框。希望这清楚我的意思。

这是我的HTML代码：

<input type="checkbox" name="person" value="frank"> Frank Aarebrot<br>
<input type="checkbox" name="person" value="gaben"> Gabe Newell<br>
<input type="checkbox" name="person" value="lance"> Lance Armstrong<br>
<input type="checkbox" name="person" value="trond"> Trond Kirkvaag<br>
<input type="checkbox" name="person" value="davy"> Davy Wathne<br>

Answer 1

您可以在每个复选框上收听change事件并相应地计算您的号码。在这里，我创建一个新的类似地图的对象，其中人名作为键，+ -1作为值，表示要添加或减去1：

var cbs = document.querySelectorAll('input[type=checkbox][name=person]');

var plusMinus = {
  frank: 1,
  gaben: -1,
  lance: 1,
  trond: -1,
  davy: 1
}

var p = document.getElementById('iq');
p.textContent = '0';

for (const cb of cbs) {
  cb.addEventListener('change', (e) => {
    var {checked, value} = e.target;
    p.textContent = parseInt(p.textContent) + plusMinus[value]
      * ((checked) ? 1 : -1) // +- math
  })
}

<input type="checkbox" name="person" value="frank"> Frank Aarebrot<br>
<input type="checkbox" name="person" value="gaben"> Gabe Newell<br>
<input type="checkbox" name="person" value="lance"> Lance Armstrong<br>
<input type="checkbox" name="person" value="trond"> Trond Kirkvaag<br>
<input type="checkbox" name="person" value="davy"> Davy Wathne<br>
<hr>
<p id="iq"></p>

如何检查是否选中了多个复选框

1 个答案: