JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<ul>
  <li>
    <input onclick="switchFunction()" type="radio" id="huey" name="players" value="1" checked />
    <label for="huey">1 Spieler</label>
  </li>
  <li>
    <input onclick="switchFunction()" type="radio" id="dewey" name="players" value="2" />
    <label for="dewey">2 Spieler</label>
  </li>
</ul>

CSS

.wrapper {
  width: 400px;
  height: 300px;
}

JavaScript

function switchFunction() {
  const radios = document.querySelectorAll('input[type="radio"]');
  radios.forEach(radio => {
    radio.addEventListener('change', function() {
      const checkedRadio = document.querySelector('input[type="radio"]:checked');
      console.log(checkedRadio.value);
    });
  });
}