Checkbutton

[Guest Sirsiljas]

Hej!

 

Jag ska ha en checkbutton på min sida, men jag vill byta ut den mot en bild. Ex. om man klickar på bilden (vit_pil.gif) så skall den bytas ut mot (svart_pil.gif) samtidigt som formen skall förstå att det är en checkbutton som har "checkats". När man klickar igen på svart_pil.gif så skall "checkbutton" avmarkeras, d.v.s. bilden (vit_pil.gif) visas.

 

Förstår ni vad jag menar?

Kort sagt, jag vill byta ut checkbutton/checkbox (eller vad den nu heter) mot bider!

 

tack på förhand!

 

[TicoRoman]

En något omständig lösning, men borde fungera:

<form name="formular">
<input type="hidden" name="variabel" value="off">

<img src="vit_pil.gif" name="lala" onClick="if (document.formular.variabel.value == 'off') { document.lala.src = 'svart_pil.gif'; document.formular.variabel.value = 'on'; } else { document.lala.src = 'vit_pil.gif'; document.formular.variabel.value = 'off'; }">

</form>

 

Säg till om du inte förstår hur det fungerar.

 

_________

TicoRoman - Anfall är bästa försvar

 

[inlägget ändrat 2003-09-07 17:40:20 av TicoRoman]

[Guest Sirsiljas]

du verkar ju kunna det mesta om det mesta mannen =)

kan du förklara lite det där med den gömda typen? eller du kanske kan förklara hela skriptet så jag inte missförstår något, för det där ser ut som om det går att använda till annat också!

 

mvh

shadi

 

[TicoRoman]

du verkar ju kunna det mesta om det mesta mannen =)

Jag kan lite om mycket.

 

kan du förklara lite det där med den gömda typen? eller du kanske kan förklara hela skriptet så jag inte missförstår något

En vanlig checkbox kan ha två olika värden: on eller off, alltså iklickad = on.

 

Om man nu (som i ditt fall) vill använda två bilder istället så får man på något sätt själv hålla reda på om det ska vara on eller off.

 

En "gömd" typ är precis som en <input type="text" .... Enda skillnaden är att den inte är synlig. Man kan dock fortfarande tilldela värden till denna med javascript.

 

Standardvärdet har jag satt till off, dvs vår bildcheckbox är inte iklickad.

 

onClick="if (document.formular.variabel.value == 'off') { document.lala.src = 'svart_pil.gif'; document.formular.variabel.value = 'on'; } else { document.lala.src = 'vit_pil.gif'; document.formular.variabel.value = 'off'; }">

Ovanstående kod utlöses när användaren klickar på bilden. Det koden gör är att först kolla om värdet på hidden-fältet är satt till off:

 

if (document.formular.variabel.value == 'off')

 

Om så är fallet innebär det att vi ska ändra detta värde till on (vi 'checkar' ju checkboxen):

 

document.formular.variabel.value = 'on';

 

Det gömda fältet får nu alltså värdet on (checkboxen är iklickad). Vi måste dock oxå ändra vår bild så att användaren vet om checkboxen är iklickad (on) eller inte (off):

 

document.lala.src = 'svart_pil.gif';

 

Bilden svart_pil.gif ska alltså representera en iklickad checkbox.

 

I mitten av koden kommer:

else { document.lala.src = 'vit_pil.gif'; document.formular.variabel.value = 'off'; }

Den koden gör samma sak som det som jag förklarat, fast tvärtom, dvs när det gömda fältet har värdet on och ska ändras till off.

 

När du sedan behandlar det skickade formuläret i något scriptspråk (tex PHP, ASP) så kommer det gömda fältet (i detta fall "variabel") bete sig som en vanlig checkbox. I stort sett...

 

_________

TicoRoman - Anfall är bästa försvar

 

[Guest Sirsiljas]

man lär sig något nytt varje dag =)

 

tack för hjälpen polarn, det fungerade för mig!

 

mvh

shadi