Javascript получить значение input radio

Как получить значение выбранного радиокнопки?

Я посмотрел повсюду и попробовал все, чтобы получить выбранное значение из группы переключателей. Здесь мой HTML:

 
 Fixed Rate Variable Rate Multi Rate
 

var rates = document.getElementById('rates').value; var rate_value; if(rates =='Fixed Rate')< rate_value = document.getElementById('r1').value; >else if(rates =='Variable Rate')< rate_value = document.getElementById('r2').value; >else if(rates =='Multi Rate') < rate_value = document.getElementById('r3').value; >document.getElementById('results').innerHTML = rate_value; 

Вы не используете jQuery здесь, но если вы когда-нибудь захотите, вы можете использовать это: $(«input[type=’radio’][name=’rate’]:checked»).val();

29 ответов

var rates = document.getElementById('rates').value; 

Элемент ставок является div , поэтому он не будет иметь значения. Вероятно, это происходит из undefined .

Свойство checked сообщит вам, выбран ли элемент:

if (document.getElementById('r1').checked)

@mzalazar Нет, каждая радиокнопка имеет свой собственный идентификатор, но у всех одинаковое имя, и именно это помещает их в одну группу, поэтому, если вы выберете одну, другая будет отменена. С помощью ответа Kamran Ahmed вы можете проверить, какая из переключателей в группе выбрана, и получить только значение выбранной (отмеченной).

Код Махдавипаны чуть выше (с [checked] ) ищет атрибут (то есть начальное состояние). Вместо этого вы должны использовать :checked , который ищет свойство (то есть текущее состояние), и который почти всегда то, что вы хотите.

Это работает в IE9 и выше и во всех других браузерах.

document.querySelector('input[name="rate"]:checked').value; 

Конечно, вам нужно проверить, возвращает ли querySelector значение NULL. Это тот случай, если ни один переключатель не отмечен.

@KamranAhmed Я не могу себе представить ситуацию, когда этот удар по производительности имел бы значение

@KamranAhmed до тех пор, пока вы не сможете профилировать вышеупомянутое и / или осмотреть реализацию, стоящую за вызовом, вы не можете сказать ничего о производительности вышеупомянутого, чем вы можете сказать о любом другом oneliner, который вызывает собственный код. У нас нет достаточно информации, чтобы предположить, как браузер может найти :checked элемент (ы) — возможно, в нем есть все, что «хэшировано и кэшировано», и это операция O(1) . Если вы не профилировали его, чтобы указать, что время запроса увеличивается с количеством элементов на странице, или если вы не понимаете исходный код браузера, вы не сможете этого сказать.

Источник

Как получить значение выбранной радиокнопки с помощью JavaScript?

Иногда нам может потребоваться получить значение выбранного переключателя в нашем веб-приложении JavaScript.

В этой статье мы рассмотрим, как получить значение выбранного переключателя с помощью JavaScript.

Перебор всех чекбоксов

Мы можем выбрать все радиокнопки в группе и получить радиокнопку, для которой установлено свойство checked: true .

Например, мы можем написать следующий HTML:

Затем мы можем получить все элементы переключателя с помощью document.querySelectorAll и получить тот, который чекнут, написав:

const fruits = document.querySelectorAll('input[name="fruit"]') for (const f of fruits) < if (f.checked) < console.log(f.value) >> 

fruits представляет собой объект HTMLCollection со всеми элементами переключателя.

Затем мы используем for-of для перебора переключателей.

В теле цикла мы получаем свойство checked .

И мы записываем значение того, что было проверено.

Следовательно, мы должны увидеть в консоли ‘grape’ .

Использование селектора :checked

Другой способ получить установленный переключатель — использовать селектор :checked .

Например, мы можем написать:

const selected = document.querySelector('input[name="fruit"]:checked').value; console.log(selected) 

Селектор input[name=”fruit”]:checked получает все элементы с именем атрибута, fruit и свойством checked:true .

Установленное значение в форме

Мы также можем получить установленное значение переключателя из значений формы.

Например, мы можем написать:

Затем мы получаем переключатель, который проверяется записью:

const form = document.getElementById("fruits"); console.log(form.elements["fruit"].value); 

Получаем элемент формы с getElementById .

Затем мы получаем входные данные с помощью form.elements[“fruit”] .

И тогда мы можем получить свойство value , чтобы получить выбранное значение.

Источник

How to Get Value of Selected Radio Button Using JavaScript?

One of the most important HTML components when attempting to design a form is the radio button. The user can only select one choice from the alternatives shown to him by the radio buttons.

Typically, we just utilize the element’s value attribute in JavaScript to retrieve an element’s value from an HTML webpage. But with radio buttons, we can’t do that. The reason is that getting the values of individual radio buttons is a bad idea.

Let’s get started with the article to learn how to get the value of a selected radio button. For this, we are going to use the checked attribute.

Using checked attribute

The checked attribute is a Boolean attribute. When present, it indicates that an element should be pre-selected (checked) when the page loads. The checked attribute can be used with both checkbox and radio input types. With JavaScript, the checked attribute can also be modified after the page has loaded.

Syntax

Following is the syntax for checked attribute −

Let’s look at some examples to get a better idea of how to get the value of a selected radio button

Example

In the following example, we are running the script for getting the value of the selected radio button.

     
Choose The Course
 
 JAVA HTML 
 Click 
    

When the script gets executed, it will generate an output consisting of text along with radio buttons and a click button. When the user selects the radio button and clicks, a pop-up window displays the value you have chosen.

Example

Considering the following example, where we are running the script to get the value of the selected radio button.

    
Choose Value And Click Submit Button
 Choose: Login In Sign Up 
 Submit 
   

On running the above script, the output window will pop up, displaying the text along with a radio button and a submit button. When the user selects the radio button and clicks the submit button, the event gets triggered and displays the chosen value.

Using the querySelector() function

The document’s first element that matches the given selector or set of selectors is returned by the querySelector() function. Null is returned if no matches were discovered.

Syntax

Following is the syntax for querySelector() —

Example

Execute the below code and observe how we are getting the value of the selected radio button.

    
Choose The Gender:
 
 Male Female Others 
 Submit 
 document.getElementById('click').onclick = function() 

When the script is run, it will generate an output consisting of text along with a radio button and a submit button. When the user chooses the values and clicks the button, a pop-up window displaying the chosen.

Источник

Как получить значение radio js

Иногда нам может потребоваться получить значение выбранного переключателя в нашем веб-приложении. Рассмотрим пример.

 id="fruits">  type="radio" name="fruit" value="apple">Apple  type="radio" name="fruit" value="orange">Orange  type="radio" name="fruit" value="grape" checked="checked">Grape  onclick="viewRadio();">Показать значение 

Напишем функционал, который выберет все радио-кнопки на странице и выведет значение только той, у которой атрибут есть checked.

const viewRadio = () =>  const fruits = document.querySelectorAll('input[name="fruit"]'); for (const f of fruits)  if (f.checked)  alert(f.value) > > > 

Источник