6 Kontrollkästchen, wenn zwei ausgewählt sind, sollte der Rest

Question

deaktivieren Mit dem unten stehenden Code funktioniert eine der sechs Möglichkeiten für 3 der Boxen nur 3 wie erwartet. Obwohl es 6 if/else-Anweisungen und 3 Listener gibt, die jede Reihenfolge abdecken, werden die Kontrollkästchen aktiviert.

Ich habe versucht, die ersten 3 zu arbeiten. Wenn sie nur die ersten beiden Boxen machen, funktionieren sie gut, aber mit drei funktionieren jetzt drei von sechs möglichen Kombinationen. Willst du alle 6 in beliebiger Reihenfolge arbeiten ihre gedrückten der Schlüssel ist, dass, wenn zwei Kontrollkästchen aktiviert sind deaktiviert den Rest als wenn Sie eine deaktivieren Sie alle wieder aktivieren.

Beachten Sie, dass das Programm selbst in Ordnung ist und die Optionsfelder gruppiert sind, so dass jeweils nur eines ausgewählt werden kann.

 inches.addItemListener(new ItemListener() { 
     public void itemStateChanged(ItemEvent e) { 
      Object source = e.getItemSelectable(); 

      if (source == inches) { 
       if (inches.isSelected() && feet.isSelected()) { 
        miles.setEnabled(false); 
        centi.setEnabled(false); 
        meters.setEnabled(false); 
        km.setEnabled(false);} 

      else{ 
        miles.setEnabled(true); 
        centi.setEnabled(true); 
        meters.setEnabled(true); 
        km.setEnabled(true); 
      } 
      if (inches.isSelected() && miles.isSelected()) { 
       feet.setEnabled(false); 
       centi.setEnabled(false); 
       meters.setEnabled(false); 
       km.setEnabled(false); 
      } 
      else{ 
       feet.setEnabled(true); 
       centi.setEnabled(true); 
       meters.setEnabled(true); 
       km.setEnabled(true); 
     } 
      if (e.getStateChange() == ItemEvent.DESELECTED); 
      } 
     } 
      }); 
    feet.addItemListener(new ItemListener() { 
     public void itemStateChanged(ItemEvent e) { 
      Object source = e.getItemSelectable();{ 


       if (source == feet) { 
      if (feet.isSelected() && miles.isSelected()) { 
       inches.setEnabled(false); 
       centi.setEnabled(false); 
       meters.setEnabled(false); 
       km.setEnabled(false); 
      } 
      else{ 
       inches.setEnabled(true); 
       centi.setEnabled(true); 
       meters.setEnabled(true); 
       km.setEnabled(true); 
     } 
      if (feet.isSelected() && inches.isSelected()) { 
       miles.setEnabled(false); 
       centi.setEnabled(false); 
       meters.setEnabled(false); 
       km.setEnabled(false); 
      } 
      else{ 
       miles.setEnabled(true); 
       centi.setEnabled(true); 
       meters.setEnabled(true); 
       km.setEnabled(true); 
     } 
        if (e.getStateChange() == ItemEvent.DESELECTED);} 
      } 
     } 
      }); 
    miles.addItemListener(new ItemListener() { 
     public void itemStateChanged(ItemEvent e) { 
      Object source = e.getItemSelectable(); 

      if(source == miles) { 
       if (inches.isSelected() && miles.isSelected()) { 
        centi.setEnabled(false); 
        feet.setEnabled(false); 
        meters.setEnabled(false); 
        km.setEnabled(false); 
       } 
       else{ 
        feet.setEnabled(true); 
        centi.setEnabled(true); 
        meters.setEnabled(true); 
        km.setEnabled(true); 
      } 
      if (feet.isSelected() && miles.isSelected()) { 
       inches.setEnabled(false); 
       centi.setEnabled(false); 
       meters.setEnabled(false); 
       km.setEnabled(false); 
      } 
      else{ 
       inches.setEnabled(true); 
       centi.setEnabled(true); 
       meters.setEnabled(true); 
       km.setEnabled(true); 
     } 
      if (e.getStateChange() == ItemEvent.DESELECTED); 
      } 
     } 
      }); 

Answer 1

Versuchen Sie die Kontrollkästchen in einem Array zu speichern und aktualisieren, so aktualisiert

var currentSelected = [undefined, undefined]; 
 
for (i in (l = ["inches", "miles", "centi", "feet", "meters", "km"])) 
 
    document.getElementById(l[i]).addEventListener("change", onChange); 
 

 
function onChange() { 
 
    if (this.checked) { 
 
    currentSelected.unshift(this); 
 
    (currentSelected.pop() || {}).checked = false; 
 
    } else { 
 
    currentSelected.push(undefined); 
 
    currentSelected.splice(currentSelected.indexOf(this), 1); 
 
    } 
 
}

<body> 
 
    <input id="inches" type="checkbox"> Inches 
 
    <br><input id="miles" type="checkbox"> Miles 
 
    <br><input id="centi" type="checkbox"> Centimeters 
 
    <br><input id="feet" type="checkbox"> Feet 
 
    <br><input id="meters" type="checkbox"> Meters 
 
    <br><input id="km" type="checkbox"> Kilometers 
 
</body>

Dies gilt nicht direkt Ihre Frage beantworten, jedoch ermöglicht es Benutzer zu ändern unchecking Auswahlen, während nur maximal 2 Optionen ausgewählt sind. Als direkte Antwort, sollte folgende Arbeiten:

var currentSelected = [undefined, undefined]; 
 
var names = ["inches", "miles", "centi", "feet", "meters", "km"]; 
 
for (i in names) { 
 
    names[i] = document.getElementById(names[i]); 
 
    names[i].addEventListener("change", onChange); 
 
} 
 

 
function onChange() { 
 
    var nChecked = 0; 
 

 
    for (i in names) 
 
    if (names[i].checked) 
 
     nChecked++; 
 
    if (nChecked >= 2) 
 
    for (i in names) { 
 
     if (!names[i].checked) 
 
     names[i].disabled = true; 
 
    } 
 
    else 
 
    for (i in names) 
 
     names[i].disabled = false; 
 
}

<body> 
 
    <input id="inches" type="checkbox"> Inches 
 
    <br><input id="miles" type="checkbox"> Miles 
 
    <br><input id="centi" type="checkbox"> Centimeters 
 
    <br><input id="feet" type="checkbox"> Feet 
 
    <br><input id="meters" type="checkbox"> Meters 
 
    <br><input id="km" type="checkbox"> Kilometers 
 
</body>