a jelölőnégyzetek használata jó lehetőség, ha azt szeretné, hogy a látogatók több elemet válasszanak a választási csoportból. Ebben a tekintetben a jelölőnégyzet egy rádiógombbal szemben működik, amely csak egy elemet választhat ki a választási csoportból., A legegyszerűbb formájában, egy jelölőnégyzet csak egy beviteli elem a típus tulajdonság beállítása jelölőnégyzetet, így:
<input type="checkbox">Azonban, mint minden bemeneti elemek, akkor meg kell adnunk egy nevet, hogy használható – név nélkül, az elem nem azonosítható, ha a kiküldetés a formája vissza, hogy a szerver feldolgozási. Értéket is szeretne beállítani – ez lesz a kiszolgálóra küldött érték, ha a jelölőnégyzet be van jelölve., Íme egy példa:
<input type="checkbox" name="nameOfChoice" value="1">ezzel a példával, ha a jelölőnégyzet be van jelölve, és az űrlapot elküldik egy szervernek, a szerver képes lesz elolvasni a “nameOfChoice” űrlapelemet, amelynek értéke 1 lesz.
ellenőrzött vagy nem ellenőrzött?
vegye figyelembe, hogy az összes jelölőnégyzetet eddig nem ellenőrizték a kezdetektől – a felhasználónak kölcsönhatásba kell lépnie a jelölőnégyzettel, hogy állapotát ellenőrizetlenről ellenőrizetlenre változtassa., Lehet, hogy ez az, amit akarsz, de néha azt szeretné, hogy a jelölőnégyzet alapértelmezés szerint be legyen jelölve, vagy javasoljon választást a felhasználónak, vagy azért, mert olyan jelölőnégyzetet jelenít meg, amely egy meglévő beállításnak felel meg, például egy adatbázisból., Szerencsére ez nagyon egyszerű – csak adja hozzá az ellenőrzött attribútumot a jelölőnégyzethez:
<input type="checkbox" name="nameOfChoice" value="1" checked>az XHTML régi napjaiban, ahol minden attribútumnak mindig van értéke, még a logikai attribútumoknak is, így néz ki:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />mindkét irányban minden modern böngészőben működnie kell, de az első út rövidebb és több “HTML5-szerű”.
több választási lehetőség
eddig minden jelölőnégyzetünk egyszerű kapcsolók voltak, például annak meghatározására, hogy egy opció be van-e kapcsolva vagy ki van-e kapcsolva., A jelölőnégyzetek erre nagyszerűek, de mint már említettük, felhasználhatók arra is, hogy a felhasználó számára válogatott lehetőségeket biztosítson. Hadd mutassak egy szép példát, ahol ennek van értelme:
figyeljük meg, hogy most már több jelölőnégyzetünk van, de mindegyiknek ugyanaz a neve (“favorite_pet”), de különböző értékek (például “kutyák”). Amikor ezt az űrlapot visszaküldik a kiszolgálónak, ezeket a jelölőnégyzeteket egyetlen név képviseli, de az érték 0-3 elem tömb lesz., Ha a jelölőnégyzetek helyett rádiógombokat használt volna, a felhasználó csak egyetlen kedvenc állatot választhatott volna, de a jelölőnégyzetekkel egyiket sem választhatja ki, mindegyiket vagy néhányat.
jelölőnégyzetek címkéi
Ha az előző példát tesztelte, észre fogja venni, hogy a szöveget egy jelölőnégyzet mellé helyezhetjük, de ezek még mindig két különálló dolog – a szövegre nem kattintva elindíthatja a jelölőnégyzetet. Ez nagyon bosszantó lehet A felhasználó számára, de szerencsére könnyű megoldani: csak használja a címkeelemet!, Itt van egy alapvető példa a különbség megmutatására:
két jelölőnégyzet-egy címke nélkül, egy pedig. Lehet, hogy majdnem azonosnak tűnnek, de a címkével rendelkezőt mind a tényleges jelölőnégyzetre, mind a mellékelt címkére kattintva aktiválhatja. Ez jó, ha egérrel ül egy asztali számítógépen, de még jobb, ha olyan érintőképernyős eszközt használ, mint egy okostelefon, ahol a kis jelölőnégyzeteket nehéz elérni az ujjával.,
a címke nagyon egyszerű – a for attribútumot használja egy megfelelő id attribútummal rendelkező form elemhez való csatoláshoz(figyelje meg, hogyan van” kutyám ” mindkét helyen).
dinamikusan működik egy jelölőnégyzettel
csakúgy, mint bármely más DOM elem, a JavaScript használatával manipulálhat egy jelölőnégyzetet. Ebben a tekintetben érdekes lehet ellenőrizni, hogy be van-e jelölve egy jelölőnégyzet, vagy sem, és talán hozzá kell adni néhány logikát annak ellenőrzésére, hogy a felhasználó hány lehetőséget választhat ki., Hogy megmutassam, hogyan lehet ezt megtenni, kiterjesztettem egy korábbi példát (a “kedvenc kisállat” választót), hogy tartalmazzon néhány JavaScript varázslatot:
engedje meg, hogy gyorsan végigfuthassam, amit ez a kód csinál. Ugyanaz a formánk van, mint korábban, de hozzáadtunk egy eseménykezelőt az egyes jelölőnégyzetekhez, ami miatt JavaScript funkciót (ValidatePetSelection) hívnak, amikor a felhasználó rájuk kattint. Ebben a funkcióban megkapjuk az összes releváns jelölőnégyzetet a getElementsByName funkció segítségével, majd körbejárjuk őket, hogy ellenőrizzük – e vagy sem-minden egyes ellenőrzött elemhez hozzáadunk egy számot., Ezt a számot ezután ellenőrizzük, ha ez meghaladja a kettőt, akkor értesítjük a felhasználót a problémáról (csak két háziállat választható ki), majd hamisan térünk vissza. A false visszaadása megakadályozza a jelölőnégyzet bejelölését.
Ez csak egy egyszerű példa arra, hogyan kell dolgozni a jelölőnégyzetekkel a JavaScript használatával. Sokkal többet tehetsz, különösen, ha olyan JavaScript-keretrendszert használsz, mint a jQuery, ami sokkal könnyebbé teszi a DOM elemek kiválasztását és manipulálását.,
összefoglaló
a jelölőnégyzetek lehetővé teszik a felhasználók számára választható opciók beállítását – akár egyetlen beállítás be-vagy kikapcsolásához, akár több választási lehetőség engedélyezéséhez, mint például a kedvenc kisállat példában. Címkékkel kell összekötni a jelölőnégyzetet és a leíró szöveget, hogy a felhasználó nagyobb területre kattinthasson a jelölőnégyzet manipulálásakor-ez szintén jó olyan technológiák támogatására, mint a látássérültek képernyőolvasói.
