Радио дугме је икона која се користи у обрасцима за примање уноса од корисника. Омогућава корисницима да изаберу једну вредност из групе радио дугмади. Радио дугмад се у основи користе за један избор од више , који се углавном користи у ГУИ облицима.
Можете означити/проверити само једно радио дугме између два или више радио дугмади. У овом поглављу ћемо вас упутити како да проверите радио дугме помоћу ЈаваСцрипт програмски језик .
За ово прво дизајнирамо образац који садржи радио дугмад користећи ХТМЛ , а затим ћемо користити ЈаваСцрипт програмирање да проверимо радио дугме. Такође ћемо проверити која вредност радио дугмета је изабрана.
Направите радио дугме
Следи једноставан код за креирање групе радио дугмади.
Копирај код
како центрирати слику на цсс
Изаберите своју омиљену сезону:
ЛетоЗима
Кишовито
Јесен
Тестирајте одмах
Проверите радио дугме
Не морамо да пишемо никакав специфичан код да бисмо проверили радио дугме. Могу се проверити када су направљени или наведени у ХТМЛ форми.
Међутим, морамо да напишемо ЈаваСцрипт код да бисмо добили вредност означеног радио дугмета, што ћемо видети у поглављу испод:
Проверите да ли је радио дугме изабрано или не
Постоје два начина у ЈаваСцрипт-у да проверите означено радио дугме или да идентификујете које је радио дугме изабрано. ЈаваСцрипт нуди две ДОМ методе за ово.
Својство инпут радио цхецкед се користи за проверу да ли је поље за потврду изабрано или не. Користите доцумент.гетЕлементБиИд('ид').цхецкед метод за ово. Вратиће проверени статус радио дугмета као логичку вредност. Може бити истинито или нетачно.
Истина - Ако је изабрано радио дугме.
нетачно - Ако радио дугме није изабрано/потврђено.
Погледајте ЈаваСцрипт код у наставку да бисте сазнали како функционише:
Пример
На пример, имамо радио дугме под називом Лето и ид = 'лето'. Сада ћемо помоћу овог ИД-а дугмета проверити да ли је радио дугме означено или не.
Копирај код
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } куериСелецтор()
Функција куериСелецтор() је ДОМ метод ЈаваСцрипт-а. Користи својство заједничког имена радио дугмади унутар њега. Овај метод се користи као што је дато у наставку да се провери које је радио дугме изабрано.
document.querySelector('input[name='JTP']:checked')
Пример
На пример, имамо групу радио дугмади која имају име име својства = 'сезона' за сва дугмад. Сада ћемо између ових дугмади под називом сезона проверити које је изабрано.
Копирај код
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Добијте вредност означеног радио дугмета:
Коришћење гетЕлементБиИд ()
Следи код за добијање вредности провереног радио дугмета помоћу методе гетЕлементБиИд():
Копирај код
систем датотека у линуксу
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Коришћење куериСелецтор()
Следи код за добијање вредности провереног радио дугмета помоћу методе куериСелецтор():
Копирај код
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Пун код да бисте добили вредност изабраног радио дугмета
У овом примеру ћемо саставити сав горњи код да бисмо направили и проверили радио дугме. Након тога ћемо такође преузети вредност изабраног радио дугмета.
Копирај код
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Тестирајте одмах Излаз
Када извршите горњи код, он ће се покренути на вебу и дати излаз као што је дато у наставку:
Одаберите један од радио дугмади и кликните на прихвати дугме и добијте изабрану вредност.
У случају да не изаберете ниједно годишње доба и директно кликните на прихвати дугме, приказаће вам поруку о грешци која - Нисте изабрали ниједну сезону јер смо користили валидацију.
Добијте вредност изабраног радио дугмета: куериСелецтор()
ДОМ куериСелецтор() метода
Функција куериСелецтор() је ДОМ метод ЈаваСцрипт-а. Овај метод се користи за добијање елемента који се поклапа са наведеним ЦСС селектор у документу. Запамтите да морате да наведете својство имена радио дугмета у ХТМЛ коду.
Користи се као доцумент.куериСелецтор('инпут[наме='ЈТП']:цхецкед') унутар картицу да бисте проверили вредност изабраног радио дугмета из групе радио дугмади. Минимизира дужину кода добијањем вредности изабраног радио дугмета користећи мали ред кода.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Погледајте код испод како ће се користити са ХТМЛ формом:
Копирај код
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Тестирајте одмах Излаз
Када извршите горњи код, он ће вам показати излаз на вебу као што је дато у наставку. Одавде изаберите своје омиљено годишње доба.
Када изаберете вредност између датог радио дугмета и кликнете на прихвати дугме, добићете изабрану вредност на вебу.
У случају да кликнете на прихвати дугме без одабира било којег радио дугмета, приказаће вам поруку о грешци да - Нисте изабрали ниједну сезону .
Дакле, овде можете видети да обоје гетЕлементБиИд('сеасон').валуе и доцумент.куериСелецтор('инпут[наме='ЈТП']:цхецкед') раде исто. Оба се користе за проналажење означене вредности радио дугмета. Можете користити било који од њих.
гетЕлементБиИд вс куериСелецтор
Обе ДОМ методе гетЕлементБиИД() и куериСелецтор() раде скоро исто. Међутим, они такође имају неколико разлика као што су перформансе и величина кода, итд. Хајде да видимо неке разлике између њих:
Дужина кода
Код написан са гетЕлементБиИд је мало дужи од куериСелецтор-а. Користећи метод гетЕлементБиИд, потребно је да проверимо свако радио дугме појединачно које је означено.
С друге стране, ако користите куериСелецтор ДОМ метод, морате само да ставите један ред кода да бисте проверили означено радио дугме и добили његову вредност. Дакле, закључак је да куериСелецтор захтева мање кода.
Перформансе
Обе функције пружају добре перформансе, али све што треба да знате која је боља. Тхе гетЕлементБиИд метода је много бржа од куериСелецтор методом. Метод куериСелецтор је такође мало сложен.
Вредност коју користе ДОМ методе
Метод гетЕлементБиИд увек користи јединствени ид сваког радио дугмета док проверава означено дугме и враћа први елемент који се подудара са ИД-ом.
претворити боолеан у стринг
Док куериСелецтор користи заједнички име (селектор) за сва радио дугмад да добије означено радио дугме и враћа први елемент који се поклапа са наведеним селектором.