Mehrere Formularoptionen gleichzeitig ankreuzen

Scripting-Tipps - JavaScript


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.


Weitere Artikel: