login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Formulieren > eigen stijl checkboxes

eigen stijl checkboxes

Auteur: Thomas - 05 november 2004 - 21:34 - Gekeurd door: Dennisvb - Hits: 8449 - Aantal punten: 4.13 (19 stemmen)



eigen stijl checkboxes
Dit script stelt je in staat, om met behulp van zelfgemaakte plaatjes, een JavaScript-functie en een standaard stuk HTML je eigen stijl checkboxes te maken. Met dit script kun je zoveel checkboxes (en check-stijlen) gebruiken als je maar wilt.

* benodigdheden
- plaatjes
Plaatjes voor je checkboxes zul je zelf moeten maken. Je hebt er minimaal twee nodig:
eentje voor het geval dat de checkbox niet is aangevinkt, en eentje voor het geval dat deze wel is aangevinkt. In dit voorbeeld gebruiken we de volgende twee plaatjes, on.gif (13x13 pixels) voor een aangevinkte checkbox, en off.gif (13x13 pixels) voor een niet aangevinkte checkbox.

- JavaScript
Je hebt het volgende stuk JavaScript nodig (zie het code deel).

Dit script spreekt redelijk voor zich. We gebruiken hier één checkbox-plaatjes paar, maar je kan er natuurlijk altijd meerdere gebruiken.

- HTML
Wat je in HTML doet is het volgende: Voor elke checkbox die je wilt maken heb je altijd de volgende twee dingen nodig: een plaatje (voor de checkbox) en een hidden input veld (voor de waarde van de checkbox). Dit plaatje en het hidden input veld hebben ALTIJD dezelfde name (hoe vreemd dat ook klinkt).
Ik geef een voorbeeld. Stel je wilt een checkbox, die als die aangevinkt is, de waarde "aan" heeft, en anders geen waarde heeft. De checkbox is standaard niet aangevinkt.

Je typt dan het volgende in voor deze checkbox (zie het HTML voorbeeld in het code deel).

Attributen van img:
src="on.gif"
De source van het plaatje van de aangevinkte checkbox moet gelijk zijn aan aan.src uit de JavaScript.
Dit veld is dus niet vrij te kiezen.

name="tick1"
De name is vrij te kiezen, zolang je er maar voor zorgt dat de name van het hidden input veld hetzelfde is.

height="13" width="13" border="0" alt=""
De hoogte en breedte hangen af van de afmetingen van het checkbox plaatje - deze kunnen dus variëren naar gelang de plaatjes die je gebruikt.

onClick="toggle(0, 'tick1', 'aan', '');"
De eerste parameter van de toggle functie is de naam (of het nummer) van de form. Als je maar één form gebruikt, kun je hier een 0 invullen. Als je meerdere forms gebruikt moet je kijken met welk form je te maken hebt. Als je je form een naam hebt gegeven, kun je voor de eerste parameter deze naam (tussen enkele quotes, het is immers een string) invullen.
De tweede parameter bevat de naam van zowel het plaatje als het hidden invoer veld.
De derde parameter bevat de value die het hidden invoerveld zou moeten hebben wanneer de checkbox is aangevinkt ("aan").
De vierde parameter bevat de value die het hidden invoerveld zou moeten heben wanneer de checkbox niet is aangevinkt ("").

Attributen van input:
type="hidden"
Dit veld moet hidden blijven.

name="tick1"
Dit is de naam van het hidden veld. Vrij te kiezen mits deze gelijk is aan de naam van het plaatje wat bij dit input veld hoort.

value=""
Dit is de default waarde van de checkbox. Omdat we er voor gekozen hebben dat de checkbox standaard NIET aangevinkt is, en de value van de checkbox de lege string ("") is wanneer deze niet is aangevinkt, is de value van het hidden input veld dus ook leeg (de lege string "").

* verschil tussen type="checkbox" en type="hidden"
Iets wat je je goed moet realiseren op het moment dat je je naar deze 'custom tickboxes' overstapt is het volgende:
Normaal is het zo, dat als je gewone checkboxes gebruikt (<input type="checkbox" name="tick" value="1" />) en deze niet aanvinkt, ze in het geheel NIET worden verstuurd als formulier-variabele. Wanneer je dus PHP gebruikt om het formulier te verwerken, zal $_POST['tick'] dus NIET bestaan als je hem niet aanvinkt.
Dan zou dus een controle op het geset zijn van deze $_POST variabele genoeg zijn (if(isset($_POST['tick'])) { ... }).
Omdat het hier een HIDDEN veld betreft (deze worden ALTIJD gepost), is deze controle op het wel of niet bestaan van deze $_POST variabele NIET genoeg!
Wanneer je dit script gebruikt zul je dus expliciet moeten controleren op de waarde van het hidden input veld (if(isset($_POST['tick']) && $_POST['tick'] == "somevalue") { ... }).
Als de waarde van de checkbox ongelijk is aan "0" en "" zou je ook op de volgende manier kunnen controleren of de checkbox is aangevinkt:
if(!empty($_POST['tick'])) { ... }

* controle script
Hieronder staat nog een voorbeeldje hoe je snel van meerdere checkboxes de waarde kan controleren. Hierbij zijn de checkboxes standaard afwisselend wel en niet aangevinkt (zie het controle script in het code-deel).

Code:
Javascript functie:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3. // preload images
  4. aan = new Image();
  5. aan.src = "on.gif";
  6.  
  7. uit = new Image();
  8. uit.src = "off.gif";
  9.  
  10. // frm:    het formulier
  11. // fld:    de veldnaam
  12. // valon:  de waarde die het hidden veld dient aan te nemen als de 'checkbox' is aangevinkt
  13. // valoff: de waarde die het hidden veld dient aan te nemen als de 'checkbox' niet is aangevinkt
  14. function toggle(frm, fld, valon, valoff) {
  15. 	// was de checkbox aangevinkt ?
  16.   if(document.images[fld].src == aan.src) {
  17. 	  // zoja, verwijder de vink, en geef het hidden veld de 'off'-waarde
  18.     document.images[fld].src = uit.src;
  19.     document.forms[frm].elements[fld].value = valoff;
  20.   } else {
  21. 	  // zonee, plaats een vink, en geef het hidden veld de 'on'-waarde
  22.     document.images[fld].src = aan.src;
  23.     document.forms[frm].elements[fld].value = valon;
  24.   }
  25. }
  26. //-->
  27. </script>


Standaard stuk HTML wat je voor elke checkbox nodig hebt:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="on.gif" name="tick1" height="13" width="13" border="0" alt="" onClick="toggle(0, 'tick1', '1aan', '1uit');" />
  2. <input type="hidden" name="tick1" value="" />


Controle script (zie ook het voorbeeld bij dit script (button onderaan)):
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>checkbox test suite</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <!--
  8. body {background-color: #000000;}
  9. //-->
  10. </style>
  11. <script language="JavaScript" type="text/javascript">
  12. <!--
  13. // preload images
  14. aan = new Image();
  15. aan.src = "on.gif";
  16.  
  17. uit = new Image();
  18. uit.src = "off.gif";
  19.  
  20. // frm:    het formulier
  21. // fld:    de veldnaam
  22. // valon:  de waarde die het hidden veld dient aan te nemen als de 'checkbox' is aangevinkt
  23. // valoff: de waarde die het hidden veld dient aan te nemen als de 'checkbox' niet is aangevinkt
  24. function toggle(frm, fld, valon, valoff) {
  25. 	// was de checkbox aangevinkt ?
  26.   if(document.images[fld].src == aan.src) {
  27. 	  // zoja, verwijder de vink, en geef het hidden veld de 'off'-waarde
  28.     document.images[fld].src = uit.src;
  29.     document.forms[frm].elements[fld].value = valoff;
  30.   } else {
  31. 	  // zonee, plaats een vink, en geef het hidden veld de 'on'-waarde
  32.     document.images[fld].src = aan.src;
  33.     document.forms[frm].elements[fld].value = valon;
  34.   }
  35. }
  36.  
  37. // check functie
  38. function check(form) {
  39. 	var checkboxes = "";
  40. 	for(var i=0; i < form.elements.length; i++) {
  41. 		// de naam van het huidige formulier-element
  42. 		var naam = form.elements[i].name;
  43. 		// hebben we met een tick-box te maken ?
  44. 		if(form.elements[i].type == "hidden" && naam.substring(0,4) == "tick") {
  45. 			checkboxes += "checkbox "+(i+1)+": "+form.elements[i].value+"\n";
  46. 		}
  47. 	}
  48. 	window.alert(checkboxes);
  49. 	return false;
  50. }
  51. //-->
  52. </script>
  53. </head>
  54.  
  55. <body>
  56. <form name="blaat" onSubmit="return check(this);" action="" method="post">
  57. <img src="on.gif" name="tick1" height="13" width="13" border="0" alt="tick1" onClick="toggle('blaat', 'tick1', 'aan', 'uit');" />
  58. <input type="hidden" name="tick1" value="aan" />
  59.  
  60. <img src="off.gif" name="tick2" height="13" width="13" border="0" onClick="toggle('blaat', 'tick2', 'aan', 'uit');" />
  61. <input type="hidden" name="tick2" value="uit" />
  62.  
  63. <img src="on.gif" name="tick3" height="13" width="13" border="0" onClick="toggle('blaat', 'tick3', 'aan', 'uit');" />
  64. <input type="hidden" name="tick3" value="aan" />
  65.  
  66. <img src="off.gif" name="tick4" height="13" width="13" border="0" onClick="toggle('blaat', 'tick4', 'aan', 'uit');" />
  67. <input type="hidden" name="tick4" value="uit" />
  68.  
  69. <input type="submit" name="submit" value="submit" />
  70. </form>
  71. </body>
  72. </html>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Geen reacties (0)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.04s