JSFiddle - React, Tailwind, and code Playground

HTML

Initialy ckecked
<span><!-- set the check attribute for the one that represents the initial value-->
<input type="radio" name="a" value="1" checked>
<input type="radio" name="a" value="0">
</span>

<br/> Initialy unchecked
<span><!-- set the check attribute for the one that represents the initial value-->
<input type="radio" name="b" value="1">
<input type="radio" name="b" value="0" checked>
</span>

CSS

span input {
  position: absolute;
}

span input:checked {
  z-index: -10;
}

span input[value="0"] {
  opacity: 0;
}

JavaScript

document.addEventListener('change', x => console.log(event.target.value));