molily: Checkboxen sollen sich wechselseitig ausschließen

Beitrag lesen

Aufgerufen wird die Funktion mit:

<script type="text/javascript">document.getElementsByTagName("input").onclick="nmul();"</script>

Das ist an sich richtig gedacht, aber so geht das nicht. Du kannst diese Liste wie gesagt durchlaufen und an jedem Element einzeln einen Event-Handler registrieren:

var inputs = document.getElementsByTagName("input");  
for (var i = 0, l = inputs.length; i < l; i++) {  
  inputs[i].onclick = nmul;  
}

Es gibt viele Wege, das eleganter zu lösen (change- und input-Events steigen auf, können also zentral überwacht werden), aber dieser ist kompatibel mit IE < 9.

Wenn man ohnehin click-Ereignisse verwendet, so kann man diese zentral beim Dokument oder beim Formular überwachen, beispielsweise:

document.forms[0].onclick = resetCheckboxes;

(Das Formular muss nicht das erste im Dokument sein. Weitere Zugriffsarten siehe http://de.selfhtml.org/javascript/objekte/forms.htm)

In der Funktion schaut man dann, ob eine Checkbox geklickt wurde und setzt die jeweils anderen zurück:

function resetCheckboxes (e) {  
  // [link:http://molily.de/js/event-handling-objekt.html#event-objekt@title=Zugriff auf das Event-Objekt]  
  e = e || window.event;  
  
  // [link:http://molily.de/js/event-handling-objekt.html#currenttarget-target@title=Hole das Zielelement]  
  var target = e.target || e.srcElement;  
  
  // Prüfe Element-Typ input und Feld-Typ checkbox  
  if (target.[ref:self812;javascript/objekte/node.htm#node_name@title=nodeName] != 'input' || target.[ref:self812;javascript/objekte/elements.htm#type@title=type] != 'checkbox') return;  
  
  // Wir haben es mit einer Checkbox zu tun  
  
  // Extrahiere mit einem [ref:self812;javascript/objekte/regexp.htm@title=Regulären Ausdruck] den Gruppennamen und Nummer aus dem Namen (angenommen, das Schema ist immer gleich)  
  var matches = target.[ref:self812;javascript/objekte/elements.htm#name@title=name].[ref:self812;javascript/objekte/string.htm#match@title=match](/^(answer\d+-)(\d+)$/)  
  if (!matches) return; // Keine Treffer  
  
  var group = matches[0]; // z.B. 'answer1-'  
  var number = Number(matches[1]); // z.B. 2  
  
  // Prüfe, welche Checkbox aktiviert wurde  
  if (number == 5) {  
     // Wenn es die fünfte ist, setze die ersten vier mit einer Helferfunktion zurück  
     for (var i = 1; i < 5; i++) {  
       resetCheckbox(group + i);  
     }  
  } else {  
     // Andernfalls setze die fünfte zurück  
     resetCheckbox(group + 5);  
  }  
}  
  
// Helferfunktion zum Zurücksetzen von Felder anhand ihres Namens  
  
function resetCheckbox (name) {  
  // Hole alle Elemente mit dem gegebenen Namen  
  var inputs = document.getElementsByName(name);  
  // Durchlaufe die Liste  
  for (var i = 0, l = inputs.length; i < l; i++) {  
    var input = inputs[i];  
    // Prüfe nochmal zur Sicherheit, ob wir es mit Checkboxen zu tun haben  
    if (input.nodeName != 'input' || input.type != 'checkbox') continue;  
    // Setze auf unchecked  
    input.[ref:self812;javascript/objekte/elements.htm#checked@title=checked] = false;  
  }  
}

Ungetestet, soll nur einen möglichen Aufbau illustrieren, wie man das einmal zentral für alle Checkboxen umsetzen kann.

Mathias