JavaScript « Получить значение radio кнопки из группы
У меня на форме есть несколько радиокнопок с одним именем(ну понятно radiogroup).
Примерно так
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<input type='radio' name='radioName' value='1'>
<input type='radio' name='radioName' value='2'>
Как получить значение value выбранного радиобатона из javascript?
Примерно так
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<input type='radio' name='radioName' value='1'>
<input type='radio' name='radioName' value='2'>
Как получить значение value выбранного радиобатона из javascript?
1 ответов
На JavaScript:
var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked && radios[i].name === 'radioName') {
//
value = radios[i].value;
}
}
С применением jQuery:
$('input[name="radioName"]:checked').val();
С применением Prototype:
$$('input[type=radio]:checked').val()
var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked && radios[i].name === 'radioName') {
//
value = radios[i].value;
}
}
С применением jQuery:
$('input[name="radioName"]:checked').val();
С применением Prototype:
$$('input[type=radio]:checked').val()
var inputs = document.getElementsByName("radioName");
var selectedValue;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked)
{
selectedValue = inputs[i].value;
break;
}
}
Это вкратце без лишних проверок. Работоспособность не проверял, простите.
Коллеги, возможно вы меня сочтете занудой, но позволю себе пару замечаний к предыдущим ответам.
RayZ, скажите, а зачем обходить весь массив инпутов, когда можно обойти только нужные элементы? Используем просто document.getElementsByName("radioName"); - сокращаем количество итераций и убираем ненужные в данном случае проверки.
Вторая придирка - использование ".length" в цикле. Я понимаю, что на современных мощностях разница будет незаметной, это уже относится больше к стилю. Но все-таки, я стараюсь избегать этого и рекомендую делать это всем. Конечный код будет выглядеть так:
var inputs = document.getElementsByName("radioName");
var selectedValue = -1;
var input_len = inputs.length;
for (var i = 0; i < input_len; i++) {
if (inputs[i].checked)
{
selectedValue = inputs[i].value;
break; // Не забываем выходить из цикла, если искомое значение получено
}
}
if (selectedValue < 0)
alert ("Вы ничего не выбрали");