複数のチェックボックスが選択されているかどうかをチェックする方法

Question

私はある種の計算機で作業しています.IQというグローバル変数があります。さて、私は5つのオプション（この場合は5人の異なる人）のチェックボックスを持っています。グローバル変数IQを選択したときに、各自がその変数を減らしたり、大きくしたりする必要があります。

私はif文でこれを行うことを考えましたが、最初のifがtrue（つまり、1人がチェックされ、value === 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を加算または減算するweither示す値として-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>