Třístavový checkbox pomocí JavaScriptu

14. srpna 2001

•

V některých HTML formulářích lze výhodně použít jednoho z prvků uživatelského rozhraní, které zavedly Windows 95 – třístavového zatržítka neboli checkboxu. Tento článek ukazuje způsob, jak takový formulářový prvek nasimulovat pomocí JavaScriptu.

V následujícím formuláři je uvedena trojice třístavových checkboxů. Kromě klasických dvou hodnot („zatržen“ a „prázdný“) cykluje checkbox ještě přes třetí hodnotu „zatržen šedivý“ – tato hodnota se ve Windows používá typicky při měnění vlastností více objektů, kdy každý z objektů má vstupní vlastnost nastavenu jinak. Po stisku tlačítka „OK“ se zobrazí potvrzovací okénko s výpisem hodnot všech tří checkboxů.

Zdrojový HTML kód jednoduchého formuláře může vypadat nějak takto:

<form name="test" onSubmit="Validate(this)">
<script>
    Create3State( "test", "prvni_checkbox", 1 )
    document.write(" Prvni<br>" )
    Create3State( "test", "druhy_checkbox", 2 )
    document.write(" Druhy<br>" )
    Create3State( "test", "treti_checkbox", 3 )
    document.write(" Treti<br>" )
</script>
<input type="submit" name="odeslat" value=" OK ">
</form>

Formulář se jmenuje „test“ a v jeho těle je na příslušných místech volána funkce Create3State, která, jak už název napovídá, vytváří 3stavový checkbox. Funkce přijímá trojici parametrů, prvním je jméno formuláře, v němž se má checkbox nacházet, druhým je jméno vytvářeného prvku a třetím výchozí stav, na který funkce právě vytvořený checkbox nastaví (jde o číslo v rozmezí 1…3).

function Create3State( form_name, field_name, init_state ) {
    document.write( ‚<input type="hidden" name="‘ +
        field_name + ‚" value="‘ + init_state + ‚">‘)
    document.write( ‚<a href="javascript:Click3State(\“ + form_name + ‚\‘,\“ +
        field_name + ‚\‘)"><img name="img_‘ + field_name + ‚" border="0" src="state‘
        + init_state + ‚.gif"></a>‘)
}

Funkce Create3State vytváří dva HTML prvky. Prvním je skryté (HIDDEN) pole formuláře se jménem field_name – to bude obsahovat aktuální hodnotu checkboxu; druhým prvkem je obrázek checkboxu, zapouzdřený kvůli obsluze do HTML odkazu. Při kliknutí na obrázek, respektive odkaz, je volána další JavaScriptová funkce Click3State. Ta jednak „překlopí“ hodnotu skrytého prvku formuláře na další hodnotu v pořadí, za druhé pak změní obrázek checkboxu, aby správně signalizoval aktuální stav. Protože se jedná o záslužnou činnost, zaslouží si funkce Click3State trochu mediální pozornosti:

function Click3State( form_name, field_name ) {
    var hidden_field = eval( ‚document.‘ + form_name + ‚.‘ + field_name )
    var newval = Number(hidden_field.value)
    newval = newval == 3 ? 1 : newval+1
    hidden_field.value = newval
    var newimg = eval( ‚s‘ + newval )
    var oldimg = eval( ‚document.images["img_‘ + field_name + ‚"]‘ )
    oldimg.src = newimg.src
}

Jak vidno z druhé části kódu této funkce, předpokládá se existence „jakýchsi“ objektů typu Image se jmény s1 až s3. Tyto objekty pochopitelně musíme nainicializovat, například takovýmto kódem:

s1 = new Image();
s1.src = "state1.gif";
s2 = new Image();
s2.src = "state2.gif";
s3 = new Image();
s3.src = "state3.gif";

Příklad vyžaduje fyzickou existenci 3 obrázků (jednotlivé stavy checkboxu) se jmény state1.gif až state3.gif ve stejném adresáři jako je HTML stránka, při změně jejich umístění je potřeba změnit příslušný kód nejenom v inicializaci objektů s1..s3, ale také v kódu funkce Create3State.

Posledním kódem, použitým v příkladu, je funkce Validate, která při odeslání formuláře vypisuje hodnotu všech 3 checkboxů do alert okénka – jde tedy o „DEBUG“ pomůcku, kterou zřejmě při běžném provozu provozu nevyužijete. Pro úplnost si ale ukážeme i její kód:

function Validate( theForm ) {
    alert( ‚Hodnota prvniho: ‚ + theForm.prvni_checkbox.value + ‚\n‘ +
        ‚Hodnota druheho: ‚ + theForm.druhy_checkbox.value + ‚\n‘ +
        ‚Hodnota tretiho: ‚ + theForm.treti_checkbox.value )
}

A to je k dnešnímu příkladu vše. Kromě 3stavového checkboxu lze pochopitelně drobnou modifikací kódu pro různé aplikace vytvořit checkbox čtyřstavový, pětistavový atd. ad libitum. Rovněž lze modifikovat rozsah hodnot, ukládaných do skrytého pole (máte-li raději „zero based“ hodnoty či potřebujete úplně jiné n-tice hodnot).

Přeji vám příjemný den.

Předchozí článek Rotace objektů ve FLASHi na základě pohybu myši

Další článek Jak pracovat se soubory ve formátu DBF v PHP 2.