Получить значение кнопки радио с помощью Javascript
У меня возникла какая-то странная проблема с моей программой JS. Я работал нормально, но по какой-то причине он больше не работает. Я просто хочу найти значение переключателя (какой из них выбран) и вернуть его переменной. По какой-то причине он продолжает возвращать undefined. Вот мой код:
function findSelection(field) {
var test = 'document.theForm.' + field;
var sizes = test;
alert(sizes);
for (i=0; i < sizes.length; i++) {
if (sizes[i].checked==true) {
alert(sizes[i].value + ' you got a value');
return sizes[i].value;
}
}
}
SubmitForm:
function submitForm() {
var genderS = findSelection("genderS");
alert(genderS);
}
HTML:
<form action="#n" name="theForm">
<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked> Male
<input type="radio" name="genderS" value="0" > Female<br><br>
<a href="javascript: submitForm()">Search</A>
</form>
Ответы
Ответ 1
JavaScript:
var radios = document.getElementsByName('genderS');
for (var i = 0, length = radios.length; i < length; i++)
{
if (radios[i].checked)
{
// do whatever you want with the checked radio
alert(radios[i].value);
// only one radio can be logically checked, don't check the rest
break;
}
}
http://jsfiddle.net/Xxxd3/610/
Изменить: Спасибо HATCHA и jpsetung за ваши предложения по редактированию.
Ответ 2
Это работает с любым проводником.
document.querySelector('input[name="genderS"]:checked').value;
Это самый чистый способ получить значение любого типа ввода.
Вам также не нужно включать jQuery в свой путь.
Ответ 3
Поскольку jQuery 1.8, правильный синтаксис для запроса -
$('input[name="genderS"]:checked').val();
Не $('input[@name="genderS"]:checked').val();
, который работал в jQuery 1.7 (с @).
Ответ 4
Простейшее решение:
document.querySelector('input[name=genderS]:checked').value
Ответ 5
Попробуйте это
function findSelection(field) {
var test = document.getElementsByName(field);
var sizes = test.length;
alert(sizes);
for (i=0; i < sizes; i++) {
if (test[i].checked==true) {
alert(test[i].value + ' you got a value');
return test[i].value;
}
}
}
function submitForm() {
var genderS = findSelection("genderS");
alert(genderS);
return false;
}
Скрипт здесь.
Ответ 6
Изменить:
Как сказано в Chips_100, вы должны использовать:
var sizes = document.theForm[field];
непосредственно без использования тестовой переменной.
Старый ответ:
Разве вам не нравится eval
?
var sizes = eval(test);
Я не знаю, как это работает, но для меня вы только копируете строку.
Ответ 7
document.forms.your-form-name.elements.radio-button-name.value
Ответ 8
Версия ECMAScript 6
let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;
Ответ 9
Вот пример для радиостанций, где не используется атрибут Checked = "checked"
function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
found = 0;
break;
}
}
if(found == 1)
{
alert("Please Select Radio");
}
}
DEMO: http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Нажмите "Найти", не выбрав любое радио]
Источник: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html
Ответ 10
Это чистый JavaScript, основанный на ответе @Fontas, но с кодом безопасности, который возвращает пустую строку (и избегает TypeError
), если нет выбранного переключателя:
var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";
Код разбивается следующим образом:
- Строка 1: получите ссылку на элемент управления, который (a) является типом
<input>
, (b) имеет атрибут name
genderS
и (c).
- Строка 2: Если есть такой элемент управления, верните его значение. Если нет, верните пустую строку. Переменная
genderSRadio
правдива, если строка 1 обнаруживает элемент управления и имеет значение null/false, если это не так.
Для JQuery используйте ответ @jbabey и обратите внимание, что если нет выбранного переключателя, он вернет undefined
.
Ответ 11
document.querySelector('input[name=genderS]:checked').value
Ответ 12
Если кто-то искал ответ и приземлился здесь, как я, из Chrome 34 и Firefox 33 вы можете сделать следующее:
var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);
или проще:
alert(document.theForm.genderS.value);
refrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value
Ответ 13
Используя чистый javascript, вы можете обрабатывать ссылку на объект, отправивший событие.
function (event) {
console.log(event.target.value);
}
Ответ 14
Если вы можете назначить Id для своего элемента form(), этот способ можно рассматривать как безопасный альтернативный способ (особенно когда имя элемента группы радио не уникально в документе):
function findSelection(field) {
var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
alert(formInputElements);
for (i=0; i < formInputElements.length; i++) {
if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
alert(formInputElements[i].value + ' you got a value');
return formInputElements[i].value;
}
}
}
HTML:
<form action="#n" name="theForm" id="yourFormId">
Ответ 15
<input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
<input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
<input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
<input type=radio name=rdbExampleInfo id=rdbExamples value="select 4">
и т.д., тогда используйте только
$("#rdbExamples:checked").val()
или
$('input[name="rdbExampleInfo"]:checked').val();
Ответ 16
var value = $('input:radio[name="radiogroupname"]:checked').val();