Как мы можем получить доступ к значению переключателя с помощью DOM?
Например, у нас есть переключатель:
<input name="sex" type="radio" value="male">
<input name="sex" type="radio" value="female">
Они находятся внутри формы с именем form1. Когда я пытаюсь
document.getElementByName("sex").value
он возвращает "самец" всегда независимо от проверенного значения.
Просто, чтобы "создать" Canavar очень полезную функцию:
function getRadioValue(theRadioGroup)
{
var elements = document.getElementsByName(theRadioGroup);
for (var i = 0, l = elements.length; i < l; i++)
{
if (elements[i].checked)
{
return elements[i].value;
}
}
}
..., на который теперь будет ссылаться:
getRadioValue('sex');
Странно, что что-то вроде этого еще не является частью prototype.js.
Если вам нужен выбранный, большинство фреймворков поддерживают такие функции:
//jQuery
$("input[name='sex']:checked").val()
Есть несколько способов.
<input name="sex" id="sex_male" type="radio" value="male">
<input name="sex" id="sex_female" type="radio" value="female">
Затем вы можете использовать document.getElementById("sex_male")
Затем вы можете сделать что-то вроде этого:
//This loops over all input elements that have a name of "sex"
$$('input[name="sex"]').each( function(elem) {
//Do something
});
Или даже для того, чтобы попасть в "мужской" переключатель:
$$('input[name="sex"][value="male"]').each(function(elem) {
//Do something
});
Простой способ начать работу с Prototype включает его из Google, добавив это между <head> </головка > теги вашей страницы:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
Вы можете получить выбранное вами значение радио с помощью этого метода:
<script>
function getRadioValue()
{
for (var i = 0; i < document.getElementsByName('sex').length; i++)
{
if (document.getElementsByName('sex')[i].checked)
{
return document.getElementsByName('sex')[i].value;
}
}
}
</script>
Удивленный никто не предложил использовать API-интерфейс Selector:
document.querySelector('input[name=sex]:checked').value
Если вы хотите выбрать один из них, но не имеете фреймворка, вы можете выполнить итерацию по массиву элементов в поисках того, что проверено:
for (var i = 0; i < document.form1.sex.length; i++) {
if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);
}
Если вы используете document.form1.sex, вам возвращается массив.
document.form1.sex[0]= первый переключатель
document.form1.sex[1]= второй переключатель
Чтобы проверить, какой флажок установлен, вам необходимо выполнить цикл:
whoChecked(document.form1.sex)
function whoChecked(fieldName) {
for(var x=0;x<fieldName.length;x++) {
if(fieldName[x].checked) {
return fieldname[x].value
}
}
var list = document.getElementsByName('sex');
for(var i=0;i<list.length;i++){
if(list[i].type=='radio' && list[i].checked){
alert(list[i].value);
break;
}
}
document.getElementByName("sex").value
Вы имеете в виду getElementsByName('sex')[0].value? (Там нет getElementByName.)
Это, конечно же, всегда будет выбирать первый элемент ввода с этим именем - тот, чье значение действительно является мужчиной. Затем вы проверяете, выбрано ли оно с помощью свойства .checked.
Для этого простого случая вы можете уйти с:
var sex= document.getElementsByName("sex")[0].checked? 'male' : 'female';
В общем случае вам нужно перебрать каждый входной радиосигнал, чтобы увидеть, какой из них проверен. Вероятно, лучше сначала получить объект формы (размещение идентификатора в форме и использование document.getElementById обычно лучше, чем использование коллекции документов на основе имени), а затем доступ к form.elements.sex для получения list, если на странице есть другие элементы с атрибутами name="sex" (потенциально другие вещи, кроме полей формы).
function getEleByName(){
if(true==document.getElementsByName('gender')[0].checked){
alert('selected gender is: male');
}
else{
alert('selected gender is: female');
}
}
Циклы могут выполнить задачу, как показали другие, но это может быть проще, чем использование цикла, что при необходимости поможет производительности. Кроме того, он может быть портативным/модульным, поэтому его можно использовать для разных групп радиостанций.
Простой пример
function getValue(x) {
alert(x.value);
}<input name="sex" type="radio" value="male" onChange="getValue(this)" />
<input name="sex" type="radio" value="female" onChange="getValue(this)" />