В JavaScript, как я могу получить все радиокнопки на странице с заданным именем?

Как говорится в названии, какой лучший способ в JavaScript получить все радиокнопки на странице с заданным именем? В конечном итоге я буду использовать это, чтобы определить, какой конкретный переключатель выбран, так что еще один способ сформулировать вопрос:

Учитывая строковую переменную в JavaScript, как я могу определить, какой именно элемент ввода радиокнопок (если есть) с этой строкой, поскольку в настоящее время выбрано это имя?

Я не использую jQuery. Если вы хотите предоставить ответ jQuery, продолжайте. Кто-то может найти это полезным. Но это не поможет мне, и я не буду его продвигать.

Ответ 1

Вы можете использовать document.getElementsByName(), передавая имя группы радио, а затем перебирайте их, проверяя атрибут checked, например. что-то вроде:

function getCheckedValue( groupName ) {
    var radios = document.getElementsByName( groupName );
    for( i = 0; i < radios.length; i++ ) {
        if( radios[i].checked ) {
            return radios[i].value;
        }
    }
    return null;
}

Ответ 2

Использовать document.getElementsByName() - это короткий ответ на заданный вами вопрос.

Однако, может быть, лучше сделать что-то вроде этого:

<form name="formFoo">
  Foo: <input type="radio" name="groupFoo" value="foo" checked> <br />
  Bar: <input type="radio" name="groupFoo" value="bar"> <br />
  Baz: <input type="radio" name="groupFoo" value="baz"> <br />
  <input type="submit" >
</form>

Затем используйте JavaScript:

function getRadioValue(formName, groupName) {
    var radioGroup = document[formName][groupName];
    for (var i=0; i<radioGroup.length; i++)  {
       if (radioGroup[i].checked)  {
       return radioGroup[i].value;
       }
    }
    return null;
}

Таким образом, вы избегаете использования функции, которая ищет весь документ. Он просто ищет сначала для формы, а затем в этой форме для элементов управления с тем же именем. Проблема здесь в том, что если вы должны иметь флажок в середине формы с тем же именем, он может быть возвращен вместо правильного значения радио. Если другой тип управления был введен с тем же именем, это может привести к ошибке. Оба эти обстоятельства должны, вероятно, считаться ошибкой программиста, но это не помешало бы расширять функцию, чтобы проверить их, при некоторой потенциальной потере производительности. Просто измените строку:

       if (radioGroup[i].checked)  {

       if (radioGroup[i].type=='radio' && radioGroup[i].checked)  {

Ответ 3

getElementsByName не работает для меня. Я сделал это:

    var radios = document.getElementsByTagName('input');
    for (i = 0; i < radios.length; i++) {
        if (radios[i].type == 'radio' && radios[i].checked) {
            nbchecked++;
        }
    }

Ответ 4

var options = document.getElementsByName('myRadioButtons');
for(i = 0; i < options.length; i++)
{
    var opt = options[i];
    if(opt.type=="radio")
    {              
        if(opt.checked)
        {
        }                  
    }
}

Ответ 5

Я буду укусить ответ jQuery

var selectedValue = $("input[name='radio_name']:checked").val();

Ответ 6

<form name="myForm" id="myForm" action="">  
<input type="radio" name="radioButton" value="c1">Choice 1
<input type="radio" name="radioButton" value="c2">Choice 2
</form>
<script>
var formElements = window.document.getElementById("myForm").elements;
var formElement;
var radioArray = [];

for (var i = 0, j = 0; i < formElements.length; i++) {
    formElement = formElements.item(i);
    if (formElement.type === "radio" && formElement.name === "radioButton") {
        radioArray[j] = formElement;
        ++j;
    }
}
alert(radioArray[0].value);
alert(radioArray[1].value);
</script>

Ответ 7

$("input[type='radio'][name='xxxxx']:checked").val()

Ответ 8

Чтобы получить все радиокнопки напрямую по имени:

element.querySelectorAll("input[name='nameOfTheName']")

Метод querySelectorAll() может использоваться для получения элементов определенного типа по имени. Существуют преимущества использования querySelectorAll по сравнению с getElementsByName() в определенных ситуациях. Если вы используете getElementsByName только на document, вы получите сообщение об ошибке:

element_Name_Here.getElementsByName не является функцией

Но querySelectorAll() может использоваться для подэлементов документа. Это полезно, когда вы хотите получить один элемент из нескольких элементов, все из которых имеют одну и ту же структуру (строки в списке). В этом случае вы можете не захотеть дать отдельный идентификатор каждой строке. В этой ситуации вызываемая функция может быть передана this, получить parentNode и родительский, найти определенный атрибут. Это позволяет избежать необходимости поиска по всему документу.

HTML

<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>

script

function getOnlyThisRowsRadios(thiz) {
  var i,L,parentElement,radioButtons;

  parentElement = thiz.parentNode;//Get the parent of the element
  radioButtons = parentElement.querySelectorAll("input[name='nameOfTheName']");
  console.log('radioButtons: ' + radioButtons)

  L = radioButtons.length;
  console.log('L: ' + L)

  for (i=0;i<L;i++) {
    console.log('radBttns[i].checked: ' + radBttns[i].checked)
    radBttns[i].checked = false;//Un-check all checked radios
  }