Получение выбранного радио без использования «Id», но «имя»

Question

Я пытался получить выбранную радио-кнопку, используя «document.getElementByName ('nameOfradio')», потому что все радио-кнопки имеют одно и то же имя.Но ничего не случилось.Я попробовал то же самое с document.getElementById ('nameOfradio') и работал хорошо. Однако мне пришлось дать уникальный идентификатор для всех переключателей.Так что, у меня получается 20 уродливых кнопок.В результате я хотел сделать ярлык.Как я могу получить значение выбранной радиокнопки, используя их «имя»?коды;

HTML

<input type="radio" name="nameOfradio" value="onm1" /> 1
<input type="radio" name="nameOfradio" value="onm2" /> 2

<input type='button' onclick='radio3()' value='Submit' />
</form>

Ajax (относительная часть radio3 ())

var radioPushed = document.getElementByName('nameOfradio').value;

var queryString = "?radioPushed=" + radioPushed;//to send the value to another file
ajaxRequest.open("GET", "radio_display.php" + queryString, true);
ajaxRequest.send(null);

Как я уже сказал документ.getElementById работал, но он требует слишком много работы :( Как я могу сделать это проще, используя обычную функцию переключателей вместо того, чтобы дать им уникальный идентификатор? Краткое объяснение, почему я не мог сделать это, было бы очень полезно (новое в javascript иAjax)

Answer 1

Эта строка:

document.getElementByName('nameOfradio').value

должно быть:

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

с использованием querySelector

Обратите внимание, что псевдоклассы CSS доступны через двоеточие (:).

Answer 2

Демо: http://jsfiddle.net/majidf/LhDXG/

Разметка

Sex:<br/> 
<input type="radio" name="gender" value="male" /> Male<br/>
<input type="radio" name="gender" value="female" /> Female
<br/>
Age group:<br/> 
<input type="radio" name="ageGroup" value="0-3" /> 0 to 3<br/>
<input type="radio" name="ageGroup" value="3-5" /> 3 to 5<br/>
<input type="radio" name="ageGroup" value="5-10" /> 5 to 10<br/>

<button onclick="getValues();">Get values</button>

JS

function getRVBN(rName) {
    var radioButtons = document.getElementsByName(rName);
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) return radioButtons[i].value;
    }
    return '';
}

function getValues() {
    var g = getRVBN('gender');
    var a = getRVBN('ageGroup');
    alert(g + ' ' + a);
}

Answer 3

document.querySelector('input[name=nameOfRadio]:checked').value

Например: -

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form> 

document.querySelector('input[name=gender]:checked').value

Кроме того, вы можете добавить атрибут checked к переключателю по умолчанию среди группы переключателей, если необходимо

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

Answer 4

Именно поэтому вы должны использовать библиотеку JavaScript.

document.querySelector('input[name=nameOfradio]');

Например,

не поддерживается до IE8.

Пусть библиотека справится с безумием браузера.

В jQuery вы можете просто использовать $('input[name=radioName]:checked').val() или $("form").serialize() и покончить с этим.

Answer 5

Избавьтесь от боли в более поздних версиях js и используйте библиотеку js, такую ​​как jQuery. Тогда вы можете сделать что-то вроде $('input[name=radioName]:checked').val()

Answer 6

Вы можете использовать свойство class, если ищете быстрое решение. Многие элементы могут иметь одинаковые class. используйте команду:

document.getElementsByClass('nameOfradio');

Кроме того, вы должны использовать правильную форму получения элементов по имени:

document.getElementsByName('nameOfradio');

Вы также можете использовать следующий код, чтобы найти выбранное значение радио следующим образом:

radioObj=document.getElementsById('nameOfradio');
var radioLength = radioObj.length;
if(radioLength == undefined) {
    if(radioObj.checked) {
        return radioObj.value;
    } else {
        return "";
    }
}
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";