Der Martin: Checkboxen überprüfen

Beitrag lesen

Hallo Frank,

kämpfe immer noch mit dem Problem einer Checkboxen Abfrage... Bisher hat nichts richtig funktioniert ...

oh je, was hast du denn schon probiert? So schwer ist es eigentlich gar nicht.

und jetzt habe ich im Netz gefunden, dass Checkboxen über "document.formname.elementname.checked" abgefragt werden können...

Das ist richtig - vorausgesetzt natürlich, die Checkboxen sind wirklich in einem HTML-Formular untergebracht und stehen nicht einfach "solo". Das zugrundeliegende HTML müsste also in etwa diese Struktur haben:

<form name="formular" action="..." method="...">
  ...
  <input type="checkbox" name="check1"> Checkbox 1<br>
  <input type="checkbox" name="check2"> Checkbox 2<br>
  <input type="checkbox" name="check3"> Checkbox 3<br>
  ...
 </form>

Kann mir jemand helfen, wie ich das umsetze, wenn ich mehrere Checkboxen zur Auswahl habe, von denen mindestens eine angeklickt werden muß?

Das Formular hast du im Prinzip so weit hingekriegt? Gut.
Wann soll denn die Überprüfung stattfinden? Sinnvollerweise doch vor dem Absenden des Formulars. Dazu bietet sich der Eventhandler onsubmit an, den du dem form-Element zusätzlich spendierst:

<form name="formular" action="..." method="..." onsubmit="return (check())">

Damit wird also unmittelbar vor dem Abschicken des Formulars die Javascript-Funktion check() aufgerufen. Das Funktionsergebnis wird über die return-Anweisung gleich weiter durchgereicht, um dem Eventhandler das Ergebnis der Prüfung mitzuteilen. Nun brauchen wir also die Funktion check().
Die muss auf die checkbox-Elemente im Formular zugreifen und prüfen, ob mindestens eins angekreuzt ist. Dieses "mindestens eins" schreit geradezu nach einer ODER-Verknüpfung.

function check()
  { var isokay = (document.formular.check1.checked
               || document.formular.check2.checked
               || document.formular.check3.checked);
    return (isokay);
  }

Die interne (lokale) Hilfsvariable isokay wird hier also true, wenn mindestens einer der abgefragten Werte true ist. Genau dann ist die Eingabe nach deiner Vorstellung auch tatsächlich in Ordnung - das ist praktisch, denn so können wir diesen ermittelten Wert direkt an den Eventhandler zurückgeben. Denn mit einem Rückgabewert true signalisiert man hier "Ja, das Event ist genehm, mach weiter", mit false dagegen "Vergiss das Ereignis, da stimmt was nicht".
Man könnte hier in der Funktion check() abhängig vom ermittelten Zustand noch weitere Aktionen vor dem return einfügen, etwa ein alert-Fenster aufpoppen lassen:

if (!isokay)
       alert("Eingabe unvollständig!");

So sollte es auf jeden Fall laufen wie gewünscht; nun könnte man allerdings noch etwas Kosmetik und "Optimierung" betreiben. Das dreimalige Hinschreiben von 'document.formular' ist nämlich unnötig. Wenn wir beim Aufruf des Eventhandlers den "Zauberparameter" this übergeben, bekommt die aufgerufene Funktion damit eine Referenz auf das Formularobjekt und muss dieses nicht jedesmal wieder umständlich ansprechen. Noch ein Nebeneffekt: Wir können auf das name-Attribut in <form> verzichten, das in den Strict-Varianten von (X)HTML dort sowieso nicht erlaubt ist. Also:

<form action="..." method="..." onsubmit="return (check(this))">

function check(f)
  { var isokay = (f.check1.checked || f.check2.checked || f.check3.checked);
    return (isokay);
  }

Sieht doch gleich viel netter aus!  ;-)

Viel Erfolg und einen schönen Tag noch,
 Martin

--
Bitte komme jemand mit einem *g* zum Wochenende, damit nicht über mich gelacht wird.
  (Gunnar Bittersmann)