как сделать, чтобы input radio отслеживал все кнопки

Question

считывает только переключение на первый input

выбрать класс .choose уже пробовал

let radio = document.querySelectorAll("input[type = 'radio']");
document.querySelector("input[type = 'radio']").addEventListener('change', function() {
  for (let i = 0; i < radio.length; i++) {
    if (radio[i].checked) {
      console.log(radio[i].value);
    }
  }
});

<ul>
  <li>
    <input id="gmail" name="mail-choose" type="radio" class="choose" checked value="@gmail.com">
    <label for="gmail">@gmail.com</label>
  </li>
  <li>
    <input id="outlook" name="mail-choose" type="radio" class="choose" value="@outlook.com">
    <label for="outlook">@outlook.com</label>
  </li>
  <li>
    <input id="spaceweb" name="mail-choose" type="radio" class="choose" value="@spaceweb.com">
    <label for="spaceweb">@spaceweb.com</label>
  </li>
  <li>
    <input id="yahoo" name="mail-choose" type="radio" class="choose" value="@yahoo.com">
    <label for="yahoo">@yahoo.com</label>
  </li>
</ul>

Answer 1

считывает только переключение на первый input

Не совсем понятен твой замысел... Предложу такой вариант.

let radio = document.querySelectorAll("input[type = 'radio']");
document.querySelector('ul').addEventListener('click', e => {
  if (e.target.tagName != 'INPUT') return
  for (let i = 0; i < radio.length; i++) {
    if (radio[i].checked) {
      console.log(radio[i].value);
    }
  }
});

<ul>
  <li>
    <input id="gmail" name="mail-choose" type="radio" class="choose" checked value="@gmail.com">
    <label for="gmail">@gmail.com</label>
  </li>
  <li>
    <input id="outlook" name="mail-choose" type="radio" class="choose" value="@outlook.com">
    <label for="outlook">@outlook.com</label>
  </li>
  <li>
    <input id="spaceweb" name="mail-choose" type="radio" class="choose" value="@spaceweb.com">
    <label for="spaceweb">@spaceweb.com</label>
  </li>
  <li>
    <input id="yahoo" name="mail-choose" type="radio" class="choose" value="@yahoo.com">
    <label for="yahoo">@yahoo.com</label>
  </li>
</ul>

Answer 2

чтобы радио отслеживал все кнопки

мб таки чтобы ивент отслеживал все радио?

form > *{display: list-item;}

<form onchange='console.log(event.target);'>
<input id='a' type='radio' name='a'>
<input id='b' type='radio' name='a'>
<input id='c' type='radio' name='a'>
<input id='d' type='checkbox'>
<input id='e' type='checkbox'>
<input id='f' type='checkbox'>
<input id='g' type='checkbox'>
<input id='h' type='radio' name='b'>
<input id='i' type='radio' name='b'>
<input id='j' type='radio' name='b'>
</form>

p.s. дабы не перелопачивать всю верстку выдергивая инпуты из <li> в форму и т.д. можно связать их с формой через form. точнее можно было бы, если бы оно точно работало...

http://htmlbook.ru/html/input/form тут все на ie жалуются, но у меня и в FF не отрабатывает.

<input type='checkbox' form='xyz'>
<form id='xyz' onchange='alert("abc")'></form>

БЛОГ НА HUSL

как сделать, чтобы input radio отслеживал все кнопки

Ответы (2 шт):