Javascript radio which checked

Now we will write the JavaScript code to define the checkValue() function to check which radio button has been selected:

Method 1: Using the getElementsByName()

We can use the .checked() property to check whether a radio button has been selected or not:

function checkValue ( ) {
var radios = document.getElementsByName ( «colour» ) ;
for ( const radio of radios ) {
if ( radio.checked ) {
alert ( radio.value + » is your favourite colour» ) ;
break ;
}
}
}

Inside the checkValue() function we have first declared a variable named radios which receives a nodelist of all the radio buttons with the name colour. We then iterate over the nodelist and check the status of each radio button. If a radio button has been selected we use the alert() method to display which colour has been selected.

The code for the entire webpage:

< button id = "submit" onclick = "checkValue()" >Submit


< script >
function checkValue ( ) {
var radios = document.getElementsByName ( «colour» ) ;
for ( const radio of radios ) {
if ( radio.checked ) {
alert ( radio.value + » is your favourite colour» ) ;
break ;
}
}
}

If we want to check for an individual radio button, we can give it a unique id and then use the getElementsById() method to store it in a variable. We can then use the checked() property to check if the button has been picked.

Method 2: Using the querySelectorAll() Method

The querySelectorAll() method takes a CSS selector as an argument and returns a nodelist of all the elements that match the given selector:

function checkValue ( ) {
var radios = document.querySelectorAll ( ‘input[name=»colour»]’ ) ;
for ( const radio of radios ) {
if ( radio.checked ) {
alert ( radio.value + » is your favourite colour» ) ;
break ;
}
}
}

The definition of the checkValue() function is almost the same in both the methods. The difference is of the method which gets the nodelist of radio buttons. Method 2 uses the querySelectorAll() method to get the nodelist.

< button id = "submit" onclick = "checkValue()" >Submit


< script >
function checkValue ( ) {
var radios = document.querySelectorAll ( ‘input[name=»colour»]’ ) ;
for ( const radio of radios ) {
if ( radio.checked ) {
alert ( radio.value + » is your favourite colour» ) ;
break ;
}
}
}

Conclusion

Radio buttons are used to get the user’s preference from a list of options. Groups of radio buttons can be formed by giving the same value to their name attributes. Only one radio button can be selected at a time. This post was about how we can use JavaScript to check whether a radio button is selected.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

Источник

JavaScript урок12. Объектная модель документа (продолжение): идентификация в javascript checkbox и radio

На уроке рассматриваются способы доступа в javascript к checkbox (флажкам) и radio (радио-кнопкам или переключателям). Разбирается принцип работы со свойством checked для осуществления проверки radio и checkbox

Объект javascript checkbox

form name="f1"> input type="checkbox" name="yourName" id="ch1"> Да /form>

Элемент checkbox идентифицируется:

document.getElementById('ch1').checked=true;

Пример: По щелчку на элементе флажок (checkbox) выводить диалоговое окно с сообщением для подтверждения: «Номер люкс очень дорогой. Вы уверены?». Скрипт описать в качестве значения атрибута.

input type="checkbox" name="checkbox1" value="Номер Люкс" onсlick=" confirm('Номер люкс очень дорогой. Вы уверены?')">Номер люкс

Свойство checked

Пример: По загрузке страницы устанавливать флажок (checkbox) отмеченным

1 способ (через name ):
В скрипте:

function check(){ document.f1.ch1.checked=true; }

body onload="check()"> form name="f1"> input type="checkbox" name="ch1">пункт1br> input type="checkbox" name="ch2">пункт2br> /form> …

2 способ (через id ):
В скрипте:

function check(){ ch1.checked=true; }

body onload="check()"> input type="checkbox" id="ch1">пункт1br> input type="checkbox" id="ch2">пункт2br>

Задание js12_1. Создать страницу проверки знаний учащегося с одним вопросом и тремя ответами на вопрос: два из них правильные и один неправильный. Осуществить проверку правильности отмеченных при помощи элементов формы checkbox ответов. Функцию проверки запускать по щелчку кнопки

Объект переключатель в javascript — radio и свойство checked

Элемент javascript radio предназначен для выбора только одного единственного варианта из нескольких.

Для того, чтобы несколько переключателей работали сгруппировано, т.е. чтобы при выборе одного radio все остальные бы отключались, необходимо для всех radio установить одинаковое значение атрибута name

Рассмотрим пример использования радиокнопок:
html-код:

body> form name="f1"> Ваш пол:br> input type="radio" name="r1" id="id1">мbr> input type="radio" name="r1" id="id2">жbr> input type="button" onclick="fanc()"> /form> /body>

Группа радиокнопок (radio) идентифицируется в скрипте следующим образом:
Скрипт:

function fanc(){ document.getElementById("id1").checked=true; // 1-й способ document.f1.r1[0].checked=true; // 2-й способ document.f1['r1'][0].checked=true; // 3-й способ }

Первый способ является наиболее предпочтительным.

Рассмотрим пример использования в javascript radio с checked свойством:

1 способ:
Скрипт:

function fanc(){ idr1.checked=true; }

input type="radio" name="r1" id="idr1">пункт1br> input type="radio" name="r1" id="idr2">пункт1br> input type="button" onClick ="fanc()" value="отметить">

2 способ:
Скрипт:

function fanc(){ document.f1.r1[0].checked=true; }

form name="f1"> input type="radio" name="r1">пункт1br> input type="radio" name="r1">пункт1br> input type="button" onClick ="fanc()" value="отметить"> /form>

Задание js12_2.
Создать страницу проверки знаний учащегося с вопросом: «Какой заряд у электрона?» и двумя ответами: «положительный» (неправильный) и «отрицательный» (правильный). Осуществить проверку правильности отмеченного при помощи элемента формы radio ответа. Функцию проверки запускать по щелчку кнопки

Источник