Űrlap jelölőnégyzetek.1104

Negyedik rész. Jelölőnégyzetek (true vagy false).

A kezdő form és záró form jelölőelemmel kijelölt objektumban, azaz területen, egy vagy több űrlapelem is elhelyezhető.

Ezek az űrlapelemek vagy adatbeviteli és adat megjelenítő elemek nem mások, mint az űrlap adatmezői.

• Szövegmezők
• Elküldő és törlő gombok
• Választógombok
• Jelölőnégyzetek
• Lenyíló listák

Adatok jóváhagyására alkalmas jelölőnégyzetek.

Jelölőnégyzetekkel az élet igen tág területén találkozhatunk, űrlapoknál, tesztlapoknál, adatgyűjtés során, stb.

A jelölőnégyzeteknek két állapota van, melyek az igen vagy nem típusú beállítások rögzítésére alkalmas.
- jelölőnégyzet üres: a választási lehetőséget nem hagytuk jóvá, értéke false
- jelölőnégyzet kipipálva: a választási lehetőséget jóváhagytuk, értéke true

Jelölőnégyzetet, az input jelölőelemmel hozzuk létre.
A value adja a négyzet jelentését, azaz meghatározza, hogy a négyzet bejelölt vagy üres állapotában, milyen érték továbbítódjon.
Alapértelmezett értéke az on, azaz bekapcsolva, mintha ki lenne pipálva. Ezért a value értéket igenre, azaz Yes értékre állítsuk be!

Azt is megadhatjuk előre a checked utasítással, hogy a weblapunkra érkező felhasználó, előre kipipált, azaz igen jelölőnégyzettel találkozzon.
De természetesen, a felhasználó, a négyzetre kattintva módosíthatja is a jóváhagyást, nem értékre.

Jelölőnégyzetet megjelenítése.
Első példa:
Jelölőnégyzet üres.
<input type="checkbox" name="jovahagyas" value="Yes">

Második példa:
Jelölőnégyzet előre kipipálva
<input type="checkbox" name="jovahagyas" value="Yes" checked>

JavaScriptben a checkbox objektum négy tulajdonsággal rendelkezik.

• name A jelölőnégyzet és az objektum neve
• value: A négyzet azon állapota, mikor bevan jelölve, (általában az on ) azaz a kiszolgálóhoz továbbítandó érték. JavaScriptben a checked tulajdonságot alkalmazzuk.
• defaultChecked: Az input jelölőelem checked jellemzője határoz meg, azaz a négyzet alapértelmezett állapota.
• checked: A négyzet aktuális értéke. Bejelőlt négyzetnél true (igen), üres négyzetnél false (nem).

JavaSriptből

• A checked tulajdonsággal módosíthatjuk a jelölőnégyzetet, vagy a négyzet értékét felhasználhatjuk.
• A click( ) ezen tagfüggvénnyel rendelkezik a jelölőnégyzet, mely a négyzetre kattintást utánozza.
• Az onClick, mint eseménykezelő, alkalmazható a jelölőnégyzethez. De csak akkor van értelme, ha a checked tulajdonsággal megvizsgáljuk a négyzet állapotát (true vagy false)

Példa a jelölőnégyzet JavaSript programból történő módosítására:
Html oldali űrlap programunk egy részlete:
<form name="rendeles">
<input type="checkbox" name="jovahagyas" value="Yes" checked>
</form>

JavaSript programunkban: Meg kell adnunk a form objektum nevét, az input jelölőelem nevét, a tulajdonsághoz (checked) tartozó értéket: (true vagy false)

document.rendeles.jovahagyas.checked = érték; (Érték lehet true vagy false. Ha négyzet kijelölve, akkor true.)

Tesztelhető példa.

<script>
function csekkelt() {
  var InputTomb = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < InputTomb.length; i++) {
  // InputTomb[i].checked értéke = true, if feltétel teljesül. Ha értéke false, if feltétel nem teljesül.
          if (InputTomb[i].checked) {
             txt = txt + InputTomb[i].value + " ";
            }
  }
  
  // Válasszunk, melyik kiíratást akarjuk alkalmazni.
  // 1. Kiíratás az id="teszt" azonosítóval rendelkező input ablakban.
        document.getElementById("teszt").value = "Kiválasztott termék = " + txt;
  
  // 2. Kiíratás az id="info" azonosítóval rendelkező tetszőleges jelölőelemben.
        id=document.getElementById("info");
        id.innerHTML = txt;
}
</script>

Vissza a lap elejére