Перемикач — це значок, який використовується у формах для введення даних від користувача. Це дозволяє користувачам вибрати одне значення з групи радіокнопок. Перемикачі в основному використовуються для один вибір із кількох , який здебільшого використовується у формах GUI.

Ви можете позначити/визначити лише один перемикач між двома чи більше перемикачами. У цьому розділі ми розповімо вам, як перевірити перемикач за допомогою Мова програмування JavaScript .

Для цього спочатку ми створюємо форму, що містить радіо кнопки за допомогою HTML, а потім ми використаємо програмування JavaScript, щоб перевірити перемикач. Ми також перевіримо, яке значення перемикача вибрано.

Створіть перемикач

Нижче наведено простий код для створення групи радіокнопок.

Копіювати код

діана анкудінова

Виберіть свій улюблений сезон:

Перевірте перемикач

Нам не потрібно писати якийсь конкретний код, щоб перевірити перемикач. Їх можна перевірити, коли вони створені або вказані у формі HTML.

Однак нам потрібно написати код JavaScript, щоб отримати значення перемикача, яке ми побачимо в розділі нижче:

Перевірте, чи вибрано перемикач

У JavaScript є два способи перевірити позначений перемикач або визначити, який перемикач вибрано. Для цього JavaScript пропонує два методи DOM.

getElementById querySelector

Властивість 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 = '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(&apos;summer&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;summer&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;winter&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;winter&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;rainy&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;rainy&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;autumn&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;autumn&apos;).value + &apos; radio button is checked&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;You have not selected any season&apos;; } } 

Вихід

Коли ви виконаєте наведений вище код, він запуститься в Інтернеті та надасть результат, наведений нижче:

Виберіть один із перемикачів і натисніть на Надіслати і отримати вибране значення.

Якщо ви не вибрали жоден із сезонів і просто натисніть на Надіслати кнопку, ви побачите повідомлення про помилку, яке - Ви не вибрали жодного сезону оскільки ми використали перевірку.

просте число в java

Отримати значення вибраного перемикача: 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( &apos;input[name=&apos;season&apos;]:checked&apos;); if(getSelectedValue != null) { document.getElementById(&apos;disp&apos;).innerHTML = getSelectedValue.value + &apos; season is selected&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;*You have not selected any season&apos;; } } 

Вихід

Коли ви виконаєте наведений вище код, він покаже вам вихідні дані в Інтернеті, як наведено нижче. Тут виберіть свою улюблену пору року.

Коли ви обираєте значення між перемикачами та клацаєте на Надіслати ви побачите вибране значення в Інтернеті.

Якщо ви натиснете на Надіслати кнопку, не вибираючи будь-який із перемикачів, ви побачите повідомлення про помилку: Ви не вибрали жодного сезону .

Отже, тут ви можете побачити, що обидва getElementById('season').value і document.querySelector('input[name='JTP']:checked') працювати так само. Обидва використовуються для пошуку значення перемикача. Ви можете використовувати будь-який з них.

getElementById проти querySelector

Обидва методи DOM getElementByID() і querySelector() працюють майже однаково. Однак вони також мають деякі відмінності, такі як продуктивність і розмір коду тощо. Давайте подивимося на деякі відмінності між ними:

Довжина коду

Код, написаний за допомогою getElementById, трохи довший за querySelector. Використовуючи метод getElementById, нам потрібно перевірити кожен перемикач окремо, який із них позначено.

З іншого боку, якщо ви використовуєте метод DOM querySelector, вам просто потрібно додати один рядок коду, щоб перевірити позначений перемикач і отримати його значення. Отже, висновок полягає в тому, що querySelector вимагає менше коду.

hashmap

Продуктивність

Обидві функції забезпечують хорошу продуктивність, але все, що вам потрібно знати, яка з них краща. The getElementById метод набагато швидший, ніж querySelector метод. Метод querySelector також трохи складний.

Значення, що використовується методами DOM

Метод getElementById завжди використовує унікальний ідентифікатор кожного перемикача під час перевірки позначеної кнопки та повертає перший елемент, який відповідає ідентифікатору.

Тоді як querySelector використовує загальний ім'я (селектор) для всіх перемикачів, щоб отримати позначений перемикач і повертає перший елемент, який збігається з указаним селектором.