ugrás a tartalomhoz

Checkbox elenorzese

zoliky · 2008. Május. 30. (P), 12.02
Mint kezdo, szeretnek egy tanacsot kerni.

* Van 5 checkbox egy HTML lapon. Az osszes egy click esemenyhez van csatolva (event listener).
* Ha raklikelek barmelyik checkbox-ra a "this" segitsegevel megtudom melyik volt kivalsztva.

Az elso checkboxot szeretnem elkuloniteni a tobbitol. Nem szeretnem a kodot terhelni felesleges esemenyekel ezert a kovetkezo modszert gondoltam ki:

- Ha lefut az esemeny megnezem melyik checkbox volt kivalasztva. Az elso checkbox egy kodot fog meghivni a tobbi meg egy masik kodot. A fuggveny amelyet a click esemeny meghiv:
  1. function clickListener()  
  2. {  
  3.    var allCheckbox = document.getElementsByTagName("input");  
  4.           
  5.    if (allCheckbox[0] == this)  
  6.    {  
  7.     alert("Az elso checkbox volt kivalasztva!");  
  8.    }  
  9.    else  
  10.    {  
  11.         alert("Valamelyik checkbox a tobbi kozul volt kivalasztva!");  
  12.    }  
  13. }  
Azt szeretnem tudni ha jol elenoriztem le. Az if fugvenyben levo kodot: allCheckbox[0] == this sajat magam elkepzelese szerint irtam oda.

Barmilyen otlet jol jonne!
‹ DOM tree építés + DOM onclick feltöltése "on the fly" javascript-tel "this" IE problem ›
 ■
1

másképpen indulj el

bandi · 2008. Május. 31. (Szo), 00.03
Nem vagyok én sem javascript varázsló, de remélem, hogy az alábbi tanácsok hasznosak/helyesek, ha nem, akkor majd kijavítanak.

Úgy tűnik, hogy minden pipálós dobozra ugyanazt az eseményt akarod ráhúzni. Valószínűleg nem nagyon változik a checkboxok listája a weboldalon, ezért érdemes csak egyszer lekérdezni, és aztán azt listát mindig elővenni. Szerencsére az ilyesmiben nagyon jó tud lenni a javascript. Azután pedig nem jó a helyzet alapján kiválasztani egy dobozt, mert akkor minden áthelyezésnél át kell írni a kódot, az pedig kényelmetlen. És szerintem érdemes az egészet belepakolni egy olyan tag-be, amire tudunk hivatkozni id-vel, így tudjuk korlátozni a script hatókörét.

Az esemény célpontjának kérdése egy bonyolultabb kérdés, érdemes ellátogatni egy szakértő oldalát megnézni.

Csináltam egy példát, hogy én hogyan képzelném el. Előbb a html, aztán a javascript, mert nem színezi különben a kódot. Szóval a html:
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">  
  4.   <head>  
  5.     <title>Pipálós jóság</title>  
  6.     <script type="text/javascript">//<![CDATA[ 
  7. //... <- ide másold be a javascriptet 
  8. //]]></script>  
  9.   </head>  
  10.   <body>  
  11.     <form action="#" method="post">  
  12.     <ul id="dobozok">  
  13.       <li><input type="checkbox" name="box1" id="box1" class="specialis"/><label for="box1">Első doboz</label></li>  
  14.       <li><input type="checkbox" name="box1" id="box2"/><label for="box2">Második doboz</label></li>  
  15.       <li><input type="checkbox" name="box1" id="box3"/><label for="box3">Harmadik doboz</label></li>  
  16.     </ul>  
  17.     </form>  
  18.   </body>  
  19. </html>  
A javascript:
  1. (function () {  
  2. var ini = { // beállítások  
  3.   'id': 'dobozok',  
  4.   'class': 'specialis'};  
  5. var attachToEvent = function(object,event,func) { // weblabor.hu/cikkek/diszkretjavascript  
  6.   if ( document.addEventListener ) {   
  7.     object.addEventListener(event,func,false);  
  8.   }  
  9.   else if ( document.attachEvent ) {  
  10.     object.attachEvent('on' + event,func);  
  11.   }  
  12.   else {  
  13.     object['on' + event] = func;  
  14.   }  
  15. };  
  16. var load = function() {  
  17.   var lista = document.getElementById(ini.id);  
  18.   var boxok = lista.getElementsByTagName('input'); // egyszer lekérdeztük, nem kell többször  
  19.   var klikk = function(event) { // dobozok eseménykezelője  
  20.     // quirksmode.org/js/events_properties.html  
  21.     // az esemény célpontjáának megszerzése  
  22.     var target;  
  23.     if (!event) var event = window.event;  
  24.     if (event.target) target = event.target;  
  25.       else if (event.srcElement) target = event.srcElement;  
  26.     // a valódi munka   
  27.     if (target.checked) { // csak kipipálásra reagál  
  28.       if (target.className == ini.class) {  
  29.         target.nextSibling.style.background = 'red'; // speciális doboz  
  30.       } else {  
  31.         target.nextSibling.style.background = 'blue'; // sima doboz  
  32.       }  
  33.     } else {  
  34.       target.nextSibling.style.background = 'transparent';  
  35.     }  
  36.   }  
  37.   for (var i = 0; i < boxok.length; i++) {  
  38.     attachToEvent(boxok[i],'click',klikk);  
  39.   }  
  40. };  
  41. attachToEvent(window,'load',load);  
  42. })();  
Szerintem ez kezdetnek nem rossz, de nyilván sok helyen lehetne javítani rajta, például úgy, hogy igény szerint tudjak gyártani ilyen dobozlista kezelőket, meg szebben is lehetne kódolni, de remélem, hogy ki lehet rajta igazodni. Ja, meg a kód egyszerűen lecserélhető két sor css-sel, ha éppen csak színezni akarnék.