Получить значение <input type=radio> элемента

132
27 июля 2019, 17:30

Как в javascript установить элемент input type=radio как отмеченный, либо убрать отметку и получить - является ли элемент зачеканным в данный момент?

Я использую методы, наподобие

roundThingy.setAttribute('checked', 'checked');

и

roundThingy.getAttribute('checked')

но оно не работает.

Есть тестовый фрагмент:

let a = document.querySelectorAll('input'); 
console.log('a =', a) //возвращает 5 узлов 
 
function listen() { 
  for (elem in a) { 
    console.log('a.checked =', a.checked); // возвращает undefined 11 раз 
    if (elem.checked) { 
      console.log(true) 
    } else { 
      console.log(false) 
    } // возвращает false 11 раз 
  } 
}
 <input type="radio" name="azaza" onchange="listen();" />один 
  <input type="radio" name="azaza" onchange="listen();" />два 
  <input type="radio" name="azaza" onchange="listen();" />три 
  <input type="radio" name="azaza" onchange="listen();" />четыре 
  <input type="radio" name="azaza" onchange="listen();" />пять

Answer 1

У input - атрибут checked служит для того, если надо по умолчанию чтобы он был отмечен, как выразился автор чекнутым. И значения false && true не имеют особого значения.

А чтобы он не был чекнутым, надо удалить атрибут

input.removeAttribute('checked')

А чтобы проверить какой элемент чекнутым надо проверять свойство input.checked

[...document.querySelectorAll('input')].forEach((s, i, arr) => { 
  console.log(arr[i].checked); 
  s.addEventListener('input', () => { 
    console.log('=========================='); 
    console.log(s, ' : ', i, ' : ', arr[i].checked); 
  }) 
})
<input value="я первый" name="r" type="radio" checked="false" /> 
<input value="я второй" name="r" type="radio" /> 
<input value="я третий" name="r" type="radio" />

Непосредственный ответ на вопрос автора

Цикл for ( * in *) возвращает объект в котором не только ключи прокручиваемых элементов, но и его свойства.

Надеюсь я правильно выразился.

let a = document.querySelectorAll('input'); 
for (let elem in a) { 
  console.log(elem); 
}
<input type="radio" name="azaza" />один 
<input type="radio" name="azaza" />два 
<input type="radio" name="azaza" />три 
<input type="radio" name="azaza" />четыре 
<input type="radio" name="azaza" />пять

Чтобы получить непосредственно элемент не надо забывать про индекс В данном примере elem - это индекс, а не сам элемент

let a = document.querySelectorAll('input'); 
for (let elem in a) { 
  if (a[elem].checked) 
    console.log(elem); 
}
<input type="radio" name="azaza" checked />один 
<input type="radio" name="azaza" />два 
<input type="radio" name="azaza" />три 
<input type="radio" name="azaza" />четыре 
<input type="radio" name="azaza" />пять

Answer 2

Как в javascript установить элемент <input type="radio" /> как отмеченный

Вы можете изначально в HTML установить атрибут checked для Вашей кнопки, если это требуется, для установки атрибута checked с помощью javascript посмотрите код ниже

<input id="rd_btn" type="radio" checked>

является ли элемент зачеканным в данный момент?

jQuery

$(document).ready(function() {
  if($("#rd_btn").prop('checked')) {
    // true
  } else {
    // false
  }
});

Javascript

var btn = document.getElementById('rd_btn');
if(btn.checked) {
  // true
} else {
  // false
}

Установить атрибут checked с помощью JS/jQuery

jQuery 1.6+

$('#rd_btn').prop('checked', true);
$('#rd_btn').prop('checked', false);

jQuery 1.5 и ниже

$('#rd_btn').attr('checked', true);
$('#rd_btn').attr('checked', false);

Javascript

document.getElementById("rd_btn").checked = true;
document.getElementById("rd_btn").checked = false;
READ ALSO
Как получить массивы обратно?

Как получить массивы обратно?

Из массива 0 и 1, получаю массив чисел (числа равны количеству 0 и 1)Не могу понять, как получить обратно массивы 0 и 1?

130
Не удается удалить элемент с массива в localstorage

Не удается удалить элемент с массива в localstorage

Записываю значения я таким способом:

149
Круговое передвижение по карте

Круговое передвижение по карте

Есть очень большой двумерный массив - игровая картаЕсть маленький двумерный массив - текущая, видимая часть игровой карты

137