Проверка input's radio на чек?

Question

[yadscreech]

Почему не работает проверка на чек?
https://codepen.io/screech/pen/ExYWWra?editors=1111

<form action="">
  <input type="radio" name="r">
  <input type="radio" name="r">
  <input type="radio" name="r">
  <input type="radio" name="r">
  <button id="btn">Кнопка</button>
</form>

const btn = document.getElementById('btn'),
      inputs = document.querySelectorAll('input'),
      checkedInputs = inputs.checked;

btn.addEventListener('click', function(){
  event.preventDefault();
  console.log(checkedInputs);
})

Comments

[nikita_help]

Начнем с того что у тебя event не написан в параметрах функции:
btn.addEventListener('click', function(event) {});

Answer 1

[DanKud]

Потому что inputs это коллекция узлов (элементов) и у этой коллекции нет свойства .checked. Оно есть только у каждого отдельного элемента в этой коллекции. Соответственно вам нужно их просто отфильтровать:

const btn = document.getElementById('btn'),
    inputs = document.querySelectorAll('input')

btn.addEventListener('click', function(){
    event.preventDefault();
    let checkedInputs = [...inputs].filter(n => n.checked);
    console.log(checkedInputs);
})

Answer 2

[hzzzzl]

надо каждый раз запрашивать querySelector когда хочешь чекнуть, checkedInputs не будет сама по себе обновляться

btn.addEventListener('click', function(){
  console.log(document.querySelector('input:checked'));
})