Javascript radio checked проверка

How to check whether a radio button is selected with JavaScript?

In the HTML, the radio buttons allow developers to create multiple options for a choice. Users can select any option, and we can get its value and know which option users have selected from the multiple options.

So, it is important to check which radio button the user selects to know their choice from multiple options. Let’s understand it via real-life examples. When you fill out any form and ask to choose a gender, you can see they give you three options, and you can select only one.

In this tutorial, we will learn two approaches to checking whether a radio button is selected using JavaScript.

Using the checked property of the radio button

We can access the radio element in JavaScript using various methods. After that, we can use its checked property to check whether the selected radio button is checked. If the value of the checked property is true, it means the radio button is selected; otherwise, it’s not selected.

Syntax

Users can follow the syntax below to check whether the radio button is selected using the checked property of the radio element.

 Male  

In the above syntax, we have accessed the radio button using its id and used the checked attribute to check whether the radio button is selected in the if-statement.

Example

In the example below, we have created three radio buttons containing different values, such as male, female, and others. In JavaScript, we have accessed each radio button by its id and checked the value of every radio button’s ‘checked’ property.

When the user selects any radio button and clicks on the button, they see a message showing the value of the selected radio button.

  
Using the checked property of the radio button to check whether a radio button is selected.
 Male 
 Female 
 Other Check radio    

Example

The example below is almost the same as the one above, but the difference is that we are accessing all radio buttons using their name at once. The getElementByName() method returns all radio elements with the name radio.

After that, we used the for-of loop to iterate through the array of radio buttons and check for every radio button using the ‘checked’ property whether the radio button is selected.

  
Using the checked property of the radio button to check whether a radio button is selected
 10 
 20 
 30 Check radio    

Use the querySelector() method to check whether a radio button is selected

Programmers can use JavaScript’s querySelector() method to select any HTML element. Here, we have used the querySelector() method to select only the checked radio button. If no radio button is selected, it returns a null value.

Syntax

Users can follow the syntax below to use the querySelector() method to check whether the radio button is selected.

var selected = document.querySelector('input[name="year"]:checked');

In the above syntax, ‘year’ is the name of the group of radio buttons, and it returns any radio button which belongs to the ‘year’ group and is checked.

Example

In the example below, we created three radio buttons providing three different choices to the users. When users click on the Check selected year button, it invokes the getSelectedRadio() function, which uses the querySelector() method to select the radio button with the name ‘year’ and is checked from the DOM.

Users can click the button without selecting any radio button and observe the output.

  
Using the querySelector() method to check whether a radio button is selected.
 1999 
 2021 
 2001 Check selected year    

Users learned two different methods to get the checked radio buttons using JavaScript. The best way to do this is to use the querySelector() method, as we need to write only a single line of code.

Источник

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 ответа. Функцию проверки запускать по щелчку кнопки

Источник

Input Radio checked Property

The checked property sets or returns the checked state of a radio button. This property reflects the HTML checked attribute.

Browser Support

Syntax

Property Values

Technical Details

Return Value:	A Boolean, returns true if the radio button is checked, and false if the radio button is not checked

More Examples

Example

Find out if a radio button is checked or not:

Example

Use a radio button to convert text in an input field to uppercase:

Example

Several radio buttons in a form:

var coffee = document.forms[0];
var txt = «»;
var i;
for (i = 0; i < coffee.length; i++) if (coffee[i].checked) txt = txt + coffee[i].value + " ";
>
>
document.getElementById(«order»).value = «You ordered a coffee with: » + txt;

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Как проверить радиокнопку с помощью JavaScript или jQuery

1. Проверьте радиокнопку с помощью JavaScript
2. Проверьте переключатель с помощью jQuery
3. Проверьте радиокнопку, основанную на нажатии кнопки

Мы часто используем клиентские скрипты, такие как jQuery или JavaScript, для создания интерактивных и быстро выполняемых веб-сайтов и можем эффективно выполнять простые операции, такие как проверка формы, без дополнительного посещения веб-сервера.

Учитывая сценарий, в котором мы хотим, чтобы радиокнопка была выбрана по умолчанию или при нажатии на кнопку, мы можем использовать JavaScript или jQuery.

Давайте начнем с определения формы.

 div id='radiobuttonset'>  input type='radio' id='myradio_1' name='radiobutton' value='1' />1  input type='radio' id='myradio_2' name='radiobutton' value='2' />2  input type='radio' id='myradio_3' name='radiobutton' value='3' />3  div> 

Проверьте радиокнопку с помощью JavaScript

Выберите радиокнопку с помощью ID

Один из лучших возможных способов предварительного выбора радиокнопки — это обращение к ней по ее идентификатору. Чтобы выбрать элемент DOM по ID, мы добавляем к ID префикс # и устанавливаем проверяемое значение как true.

document.querySelector('#myradio_1').checked = true; 

Выберите радиокнопку, используя значение

Альтернативным вариантом является использование значения радиокнопки для предварительного выбора. Выбор по значению может быть полезен в сценариях, где мы не знаем ID радиокнопки, но знаем ее значение.

Мы можем использовать ID родительского div и выбрать элемент, значение которого равно 2. Затем мы можем установить проверяемый атрибут в true.

document.querySelector('#radiobuttonset > [value="2"]').checked = true; 

В некоторых случаях, когда мы знаем, что в DOM нет других элементов, равных предопределенному значению, мы можем выбрать элемент, просто проверив значение. В этом случае нам не понадобится родительский ID.

document.querySelector('[value="3"]').checked = true; 

Проверьте переключатель с помощью jQuery

Помимо использования JavaScript, мы также можем использовать библиотеку jQuery для проверки радиокнопок, основанных на предопределенном значении. jQuery — это библиотека, построенная с использованием JavaScript. Она помогает упростить обход и манипуляции с HTML DOM. Синтаксис jQuery также проще, чем JavaScript.

Чтобы добавить использование jQuery, добавьте ссылку на библиотеку jQuery либо из CDN, либо из локального файла.

Выберите радиокнопку с помощью ID

Как и в JavaScript, для доступа к элементу DOM по идентификатору мы используем префикс # . Однако, точный синтаксис зависит от версии используемого jQuery.

Текущая стабильная версия jQuery — 3.4.1.

Версия jQuery равна или выше (>=) 1.6

Если используемая версия jQuery больше или равна 1.6, мы используем prop для установки проверяемого атрибута в true.

$("#myradio_1").prop("checked", true); 

Версией jQuery являются версии до (<) 1.6

Если версия jQuery до 1.6, мы можем обновить attr как проверено.

$("#myradio_2").attr('checked', 'checked'); 

Выберите радиокнопку, используя значение

Мы также можем обновить выбранное значение для радиокнопки на основе значения кнопки.

$("input[name=radiobutton][value='1']").prop("checked",true); 

Проверьте радиокнопку, основанную на нажатии кнопки

Как только мы узнаем, как обновить переключатель с помощью JavaScript или jQuery, мы можем обновить выделение, основанное на каком-то событии, например, щелчке по кнопке или любом другом элементе выделения. Чтобы протестировать это, давайте обновим нашу форму, чтобы добавить кнопку.

div id='radiobuttonset'>  input type='radio' id='myradio_1' name='radiobutton' value='1' />1  input type='radio' id='myradio_2' name='radiobutton' value='2' />2  input type='radio' id='myradio_3' name='radiobutton' value='3' />3  div>  button id="button_1">check 1button> 

Затем мы можем добавить событие щелчка по кнопке. Нажав на кнопку, он выбирает первую радиокнопку.

$("#button_1").click(function()   $("input[name=radiobutton]").val(['1']); >); 

Источник