⊗jsPmFmRd 402 of 505 menu

Рад са радио дугмадима у 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 означеног радио дугмета.

Српски
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Користимо колачиће за рад сајта, аналитику и персонализацију. Обрада података се врши у складу са Политиком приватности.
прихвати све подеси одбиј