JSFiddle - React, Tailwind, and code Playground

by rhelminen

HTML

<div>
  <input id="p75" type="radio" name="geodesic_size" value="11250">
  <label for="p75">p75</label>
</div>
<div>
  <input id="p30" type="radio" name="geodesic_size" value="5626" checked>
  <label for="p30">p30</label>
</div>

CSS

/*
.active {
  color: red;
}
*/

input:checked + label {
  color: red;
}

JavaScript

var radios = document.querySelectorAll('input[type=radio]'); 
var label = document.querySelectorAll('label');

radios.forEach(radio => radio.addEventListener('change', active))

function active(e) {
    radios.forEach((el,index) => {
        if (el.checked) {
        		el.labels[0].classList.add('active')
        } else {
            el.labels[0].classList.remove('active')
        }
    })
}