Бутонът за избор е икона, която се използва във формуляри за въвеждане на информация от потребителя. Позволява на потребителите да изберат една стойност от групата радио бутони. Радио бутоните се използват основно за единична селекция от множество , който се използва най-вече в GUI форми.
Можете да маркирате/маркирате само един радио бутон между два или повече радио бутона. В тази глава ще ви насочим как да поставите отметка на радио бутон с помощта на Език за програмиране JavaScript .
За целта първо проектираме форма, съдържаща радио бутони използвайки HTML и след това ще използваме програмиране на JavaScript, за да проверим бутона за избор. Също така ще проверим коя стойност на радио бутона е избрана.
Създайте радио бутон
Следва прост код за създаване на група радио бутони.
Копиране на код
какво е maven
Изберете своя любим сезон:
лятоЗима
Дъждовно
Есента
Тествайте сега
Проверете радио бутон
Не е необходимо да пишем конкретен код, за да проверим бутона за избор. Те могат да бъдат проверени, след като бъдат създадени или посочени в HTML форма.
Трябва обаче да напишем JavaScript кода, за да получим стойността на маркирания радио бутон, който ще видим в главата по-долу:
Проверете дали радиобутонът е избран или не
В JavaScript има два начина за проверка на маркирания радио бутон или за идентифициране кой радио бутон е избран. JavaScript предлага два DOM метода за това.
Свойството input radio checked се използва за проверка дали квадратчето за отметка е избрано или не. Използвайте document.getElementById('id').проверено метод за това. Той ще върне проверения статус на бутона за избор като булева стойност. Тя може да бъде вярна или невярна.
Вярно - Ако е избран радиобутон.
невярно - Ако радиобутонът не е избран/маркиран.
Вижте кода на JavaScript по-долу, за да разберете как работи:
Пример
Например, имаме радио бутон с име Лято и id = 'лято'. Сега ще проверим с помощта на този идентификатор на бутона дали радиобутонът е маркиран или не.
Копиране на код
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
Функцията querySelector() е DOM метод на JavaScript. Той използва свойството общо име на радио бутоните вътре в него. Този метод се използва, както е дадено по-долу, за да проверите кой радио бутон е избран.
най-добрият хентай
document.querySelector('input[name='JTP']:checked')
Пример
Например, имаме група радио бутони, имащи name property name = 'season' за всички бутони. Сега между тези бутони, наречени сезон, ще проверим кой е избран.
Копиране на код
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Вземете стойността на маркирания бутон за избор:
Използване на getElementById ()
Следва кодът за получаване на стойността на отметнатия радио бутон с помощта на метода getElementById():
Копиране на код
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Използване на querySelector()
Следва кодът за получаване на стойността на отметнатия радио бутон с помощта на метода querySelector():
Копиране на код
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'; } } Тествайте сега Изход
Когато изпълните горния код, той ще се изпълнява в мрежата и ще даде резултата, както е дадено по-долу:
Изберете един от бутоните за избор и щракнете върху Изпращане и вземете избраната стойност.
В случай, че не изберете някой от сезоните и щракнете директно върху Изпращане бутон, той ще ви покаже съобщение за грешка, което - Не сте избрали нито един сезон защото сме използвали валидирането.
Вземете стойността на избрания бутон за избор: querySelector()
DOM метод querySelector().
Функцията querySelector() е DOM метод на JavaScript. Този метод се използва за получаване на елемента, който съвпада с посочения CSS селектор в документа. Не забравяйте, че трябва да посочите свойството name на бутона за избор в HTML кода.
Използва се като document.querySelector('input[name='JTP']:checked') вътре в за проверка на избраната стойност на радиобутона от групата радиобутони. Минимизира дължината на кода, като получава стойността на избрания бутон за избор с помощта на малък ред код.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Вижте кода по-долу как ще се използва с HTML формуляр:
Копиране на код
<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'; } } Тествайте сега Изход
Когато изпълните горния код, той ще ви покаже резултата в мрежата, както е дадено по-долу. От тук изберете любимия си сезон.
Когато изберете стойност между дадения бутон за избор и щракнете върху Изпращане бутон, ще получите избраната стойност в мрежата.
В случай, че щракнете върху Изпращане без да избирате някой от бутоните за избор, ще ви покаже съобщение за грешка, което - Не сте избрали нито един сезон .
как да извлечете скрити приложения
И така, тук можете да видите и двете getElementById('сезон').стойност и document.querySelector('input[name='JTP']:checked') работи същото. И двете се използват за намиране на стойността на маркирания бутон за избор. Можете да използвате всеки от тях.
getElementById срещу querySelector
И двата DOM метода getElementByID() и querySelector() работят почти еднакво. Въпреки това, те също имат няколко разлики като производителност и размер на кода и т.н. Нека видим някои разлики между тях:
Дължина на кода
Кодът, написан с getElementById, е малко по-дълъг от querySelector. Използвайки метода getElementById, трябва да проверим всеки радио бутон поотделно кой е маркиран.
От друга страна, ако използвате DOM метода querySelector, просто трябва да поставите един ред код, за да проверите маркирания радио бутон и да получите неговата стойност. И така, заключението е, че querySelector изисква по-малко код.
производителност
И двете функции осигуряват добра производителност, но всичко, което трябва да знаете коя е по-добра. The getElementById методът е много по-бърз от querySelector метод. Методът querySelector също е малко сложен.
Стойност, използвана от DOM методи
Методът getElementById винаги използва уникален идентификатор на всеки бутон за избор, докато проверява маркирания бутон и връща първия елемент, съвпадащ с идентификатора.
Докато querySelector използва общ име (селектор) за всички радио бутони, за да получите маркирания радио бутон и връща първия елемент, който съвпада с посочения селектор.