Nastavitev in preverjanje radijskih gumbov

Namestitev in potrditev radijski gumbi se zdi, da je obrazec polje kar mnogim spletnim skrbnikom povzroča največ težav pri nastavitvi. Dejansko je nastavitev teh polj najenostavnejša od vseh polj obrazca, ki jih je treba preveriti, saj izbirni gumbi nastavijo eno vrednost, ki jo je treba preizkusiti šele, ko je obrazec oddan.

Težavnost radijskih gumbov je, da obstajata vsaj dve in običajno več polj, ki jih je treba postaviti na obrazec, med seboj povezana in preizkušena kot ena skupina. Pod pogojem, da za gumbe uporabljate pravilne konvencije o poimenovanju in postavitev, ne boste imeli težav.

Prva stvar, na katero moramo biti pozorni pri uporabi radijskih gumbov na našem obrazcu, je, kako je treba gumbe kodirati, da lahko pravilno delujejo kot radijski gumbi. Zaželeno vedenje je, da imamo hkrati izbran samo en gumb; če je izbran en gumb, bo vsak prej izbran gumb samodejno izbran.

Tu je rešitev, da vsem radijskim gumbom v skupini damo isto ime, vendar različne vrednosti. Tu je koda, ki se uporablja za sam izbirni gumb.

Ustvarjanje več skupin radijskih gumbov za eno obliko je prav tako enostavno. Vse, kar morate storiti, je, da drugi skupini radijskih gumbov zagotovite drugačno ime kot tisto, ki se uporablja za prvo skupino.

Polje z imenom določa, kateri skupini pripada določen gumb. Vrednost, ki bo poslana določeni skupini, ko bo obrazec predložen, bo vrednost gumba znotraj skupine, ki je izbrana v času, ko je obrazec oddan.

Da bi oseba, ki izpolnjuje obrazec, razumela, kaj počne vsak izbirni gumb v naši skupini, moramo za vsak gumb predložiti opise. Najenostavnejši način je, da takoj po gumbu navedete opis kot besedilo.

Ima pa nekaj težav s samo uporabo navadnega besedila:

1. Besedilo je lahko vizualno povezano z izbirnim gumbom, vendar nekaterim, ki na primer uporabljajo bralnike zaslonov, ni jasno.
2. V večini uporabniški vmesniki S pomočjo radijskih gumbov je besedilo, povezano z gumbom, mogoče klikniti in lahko izbere svoj povezani gumb. V našem primeru tukaj besedilo ne bo delovalo na ta način, če besedilo ni posebej povezano z gumbom.

Če želite besedilo povezati z ustreznim izbirnim gumbom, tako da bomo s klikom na besedilo izbrali to tipko dodajte kodo za vsak gumb tako, da obkrožite celoten gumb in z njim povezano besedilo znotraj nalepka.

Tukaj je videti celoten HTML za enega od gumbov:

 gumb ena

Kot izbirni gumb z id-om, omenjenim v za parameter oznake je dejansko vsebovan znotraj same oznake, za in id parametri so v nekaterih brskalnikih odveč. Njihovi brskalniki pa pogosto niso dovolj pametni, da bi prepoznali gnezdenje, zato jih je vredno vključiti, da maksimizirajo število brskalnikov, v katerih bo koda delovala.

S tem je zaključeno kodiranje samih radijskih gumbov. Zadnji korak je nastavitev preverjanja izbirnega gumba z uporabo JavaScript.

Validacija skupin radijskih gumbov morda ni očitna, je pa preprosto, ko veste, kako.

Naslednja funkcija bo potrdila, da je bil izbran eden od izbirnih gumbov v skupini:

// Preverjanje radijske tipke
// avtorske pravice Stephen Chapman, 15. 11. 2004, 14. septembra 2005
// to funkcijo lahko kopirate, vendar vas prosimo, da obdržite obvestilo o avtorskih pravicah
funkcija valButton (btn) {
var cnt = -1;
za (var i = btn.length-1; i> -1; jaz--) {
če (btn [i]. označeno) {cnt = i; i = -1;}
}
če (cnt> -1) vrne btn [cnt]. vrednost;
drugače vrni ničelno;
}

Če želite uporabiti zgornjo funkcijo, jo pokličite iz svoje rutine za potrjevanje obrazca in ji dodajte ime skupine gumbov. Vrnil bo vrednost gumba znotraj izbrane skupine ali vrnil ničelno vrednost, če v skupini ni izbran noben gumb.

Tu je na primer koda, ki bo opravila preverjanje izbirnega gumba:

var btn = valButton (form.group1);
če (btn == null) opozorilo ("ni izbran noben radijski gumb");
drugo opozorilo ('vrednost gumba' + btn + 'izbrano');

Ta koda je bila vključena v funkcijo, ki jo je imenoval an onClick dogodek, priložen gumbu za potrditev (ali oddajo) na obrazcu.

Sklic na celoten obrazec je bil poslan kot parameter v funkcijo, ki uporablja argument "obrazec" za sklicevanje na celoten obrazec. Zato za potrditev skupine gumbov s poimenovanjem group1 prestavimo form.group1 v funkcijo valButton.

Z vsemi skupinami izbirnih gumbov, ki jih boste kdaj potrebovali, lahko upravljate z zgornjimi koraki.