Rad sa radio dugmadima u JavaScript
Hajde sada da poradimo sa radio dugmadima.
Ona predstavljaju grupu prekidača,
od kojih se može izabrati samo jedan.
Da bi više radio dugmadi bila grupa,
moraju imati istu vrednost atributa
name:
<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">
A da bi se na JavaScript razlikovalo koje je tačno dugme izabrano, svakom radio dugmetu u grupi se dodaju atributi value sa različitim vrednostima:
<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">
Da bi neko radio dugme bilo označeno
podrazumevano, potrebno mu je zadati atribut
checked:
<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">
Hajde da na praksi vidimo kako se radi sa ovakvim dugmadima u JavaScript. Neka kod nas postoji gore prikazana grupa radio dugmadi, kao i obično dugme:
<input type="submit" id="button">
Hajde da napravimo da se pritiskom na
dugme na ekran ispiše value onog
radio dugmeta koje je trenutno označeno.
Za rešavanje zadatka potrebno je proći kroz sva
naša radio dugmad petljom i utvrditi koje
od njih je izabrano. Za to treba pročitati
vrednost svojstva checked svakog od
prolaznih radio dugmadi. Ono kod koga je ovo svojstvo
jednako true - to radio dugme je i izabrano.
Realizujmo opisano:
let radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');
button.addEventListener('click', function() {
for (let radio of radios) {
if (radio.checked) {
console.log(radio.value);
}
}
});
Data su 3 radio dugmeta, pasus i dugme.
Klikom na dugme ispišite u pasus value
označenog radio dugmeta.