Рад са радио дугмадима у JavaScript-у
Хајде сада да порадимо са радио дугмадима.
Они представљају групу прекидача,
од којих може бити изабран само један.
Да би више радио дугмада било група,
они морају имати исту вредност атрибута
name:
<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">
А да би се на JavaScript-у разликовало која је тачно дугме изабрано, сваком радио дугмету у групи додају се атрибути value са различитим вредностима:
<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">
Да би се неко радио дугме подразумевано означило
како треба, потребно му је задати атрибут
checked:
<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">
Хајде да видимо у пракси како се ради са оваквим дугмадима на JavaScript-у. Нека имамо приказану горе групу радио дугмади, као и обично дугме:
<input type="submit" id="button">
Хајде да направимо да се при клику на
дугме на екран испише value оног
радио дугмета које је тренутно означено.
За решавање задатка потребно је прећи сва
наша радио дугмад циклусом и одредити које
је од њих изабрано. За то треба очитати
вредност својства checked сваког од
прегледаних радио дугмади. Ономе код кога је ово својство
једнако true - то радио дугме је и изабрано.
Реализујмо описано:
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);
}
}
});
Дато је 3 радио дугмади, пасус и дугме.
При клику на дугме испишите у пасус value
означеног радио дугмета.