JavaScript

Mehrere Formularoptionen gleichzeitig ankreuzen

Details
Veröffentlicht am Samstag, 18. Oktober 2008 23:36
Geschrieben von Jan Pionzewski

Wenn Sie Ihren Besuchern die Möglichkeit geben wollen, mehrere Optionen in einem Formular gleichzeitig anzukreuzen, können Sie dazu dieses JavaScript benutzen.

Folgendes Script muss dabei in den <head>...</head>-Bereich Ihrer Webseite gesetzt werden.

Beispiel:

<script language="JavaScript">
<!--
var Marker = "false";

function CheckboxenAktivieren(field)
{
    if(Marker == "false")
    {
        for(i = 0; i < field.length; i++)
        {
            field[i].checked = true;
        }

        Marker = "true";
        return "Nichts markieren";
    }
    else
    {
        for(i = 0; i < field.length; i++)
        {
            field[i].checked = false;
        }

        Marker = "false";
        return "Alles markieren";
    }
}
//-->
</script>


Damit das Script eingesetzt werden kann, muss noch ein kleiner Button in das Formularfeld eingefügt werden.

Beispiel:

<form>
<p>Welche Anforderungen stellen Sie an eine gute Website?</p><br /><br />
   <input type="button" onClick="this.value=CheckboxenAktivieren(this.form.Anforderung);" value="Alles markieren"><br /><br />
   <input type="checkbox" name="Anforderung" value="Inhalt">Inhalt<br />
   <input type="checkbox" name="Anforderung" value="Design">Design<br />
   <input type="checkbox" name="Anforderung" value="Uebersichtlichkeit">Übersichtlichkeit<br />
   <input type="checkbox" name="Anforderung" value="ValiderCode">Valider Code<br />
   <input type="checkbox" name="Anforderung" value="Barrierefreiheit">Barrierefreiheit<br />
</form>


Hinweis:
Wenn Sie nur eine Checkbox in Ihrem Formularfeld haben, funktioniert dieses Script nicht (das würde aber auch keinen Sinn machen). Ansonsten können Sie natürlich so viele Checkboxen wie Sie mögen einfügen.
Sollten Sie in Ihrem Formular mehrere unterschiedliche Gruppen mit Checkboxen haben, können Sie diesen auch unterschiedliche Buttons zuordnen. Dazu muss lediglich das Attribut name angepasst werden. Vergessen Sie nicht, den entsprechenden Wert im Attribut onClick im Button ebenfalls anzugleichen.

Kommentar schreiben

Sicherheitscode
Aktualisieren