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:

function clickListener()
{
   var allCheckbox = document.getElementsByTagName("input");
		
   if (allCheckbox[0] == this)
   {
	alert("Az elso checkbox volt kivalasztva!");
   }
   else
   {
        alert("Valamelyik checkbox a tobbi kozul volt kivalasztva!");
   }
}
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:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
  <head>
    <title>Pipálós jóság</title>
    <script type="text/javascript">//<![CDATA[
//... <- ide másold be a javascriptet
//]]></script>
  </head>
  <body>
    <form action="#" method="post">
    <ul id="dobozok">
      <li><input type="checkbox" name="box1" id="box1" class="specialis"/><label for="box1">Első doboz</label></li>
      <li><input type="checkbox" name="box1" id="box2"/><label for="box2">Második doboz</label></li>
      <li><input type="checkbox" name="box1" id="box3"/><label for="box3">Harmadik doboz</label></li>
    </ul>
    </form>
  </body>
</html>
A javascript:

(function () {
var ini = { // beállítások
  'id': 'dobozok',
  'class': 'specialis'};
var attachToEvent = function(object,event,func) { // weblabor.hu/cikkek/diszkretjavascript
  if ( document.addEventListener ) { 
    object.addEventListener(event,func,false);
  }
  else if ( document.attachEvent ) {
    object.attachEvent('on' + event,func);
  }
  else {
    object['on' + event] = func;
  }
};
var load = function() {
  var lista = document.getElementById(ini.id);
  var boxok = lista.getElementsByTagName('input'); // egyszer lekérdeztük, nem kell többször
  var klikk = function(event) { // dobozok eseménykezelője
    // quirksmode.org/js/events_properties.html
    // az esemény célpontjáának megszerzése
    var target;
    if (!event) var event = window.event;
    if (event.target) target = event.target;
      else if (event.srcElement) target = event.srcElement;
    // a valódi munka 
    if (target.checked) { // csak kipipálásra reagál
      if (target.className == ini.class) {
        target.nextSibling.style.background = 'red'; // speciális doboz
      } else {
        target.nextSibling.style.background = 'blue'; // sima doboz
      }
    } else {
      target.nextSibling.style.background = 'transparent';
    }
  }
  for (var i = 0; i < boxok.length; i++) {
    attachToEvent(boxok[i],'click',klikk);
  }
};
attachToEvent(window,'load',load);
})();
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.