0

Как в 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();" />пять

2
  • У input нет закрывающего тега
    – Air
    7 янв 2019 в 18:08
  • @Air Исправил, спасибо. 7 янв 2019 в 18:12

2 ответа 2

3

У 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" />пять

2
  • А если .checked только для установки значения по умолчанию, то какой атрибут отражает текущее состояние? 7 янв 2019 в 18:27
  • @IgorCheglakov, я не правильно понял вопрос. Проверять состояние надо не присутствием или отсутствием атрибута. А свойством input.checked
    – Air
    7 янв 2019 в 18:49
1

Как в 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;
2
  • Я добавил пример, Можете пожалуйста проверить почему код из примера не работает как запланировано? 7 янв 2019 в 18:10
  • @IgorCheglakov, как я полагаю, вы хотите на изменение input'a делать какое-то действие? Поправте меня, если я не прав.
    – meine
    7 янв 2019 в 18:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.