2017-06-05 5 views
-2

Ich arbeite an einer Art Taschenrechner, und sagen wir haben eine globale Variable namens IQ. Jetzt habe ich ein Kontrollkästchen mit 5 Optionen (in diesem Fall 5 verschiedene Personen). Ich möchte, dass jede Person den globalen Variablen-IQ entweder reduziert oder erhöht, wenn sie ausgewählt werden.Wie überprüft man, ob mehrere Checkboxen ausgewählt sind

Ich dachte darüber nach, dies mit if-Anweisungen zu tun, aber was ist, wenn das erste if wahr ist (d. H. Eine Person ist geprüft und Wert === Person). Dann würde der Code richtig anhalten und die anderen if-Anweisungen nicht überprüfen, um zu sehen, ob mehr Personen/Checkboxen ausgewählt sind. Hoffe, das ist klar, was ich dachte.

Das ist mein HTML-Code:

<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> 
+0

der einzige Weg wäre es nicht Überprüfen Sie die anderen if-Anweisungen, wenn Sie sie alle zu einem großen if-else-Block zusammengefasst haben. Wenn Sie jede if-Anweisung getrennt hätten, würde sie trotzdem jede if-Anweisung auswerten. Wenn Sie Javascript-Code versucht haben, der das Problem veranschaulichen könnte, sollten Sie es in der Frage hinzufügen. Sie haben Javascript getaggt, weil Sie Javascript schreiben werden, aber Sie sollten wirklich einen Versuch in Ihrer Frage haben. – Lexi

+0

Mögliches Duplikat von [Hole den Wert des aktivierten Kontrollkästchens?] (Https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox) – Code4R7

Antwort

0

Sie können auf jedem Kontrollkästchen, um change Ereignis hören und Ihre Nummer entsprechend berechnen. Hier erstelle ich eine neue Karte artiges Objekt mit Personennamen als Schlüssel und + -1 als Wert anzuzeigen weither 1 zu addieren oder subtrahieren:

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>

Verwandte Themen