JSFiddle - React, Tailwind, and code Playground

by SebAshton

HTML

<div>
    <input id="input-one" type="radio" name="group" value="one"/>
    <label for="input-one">Click me</label>
    <input id="input-two" type="radio" name="group" value="two"/>
    <label for="input-two">Click me</label>
    
</div>

CSS

label {
    color: blue;
    cursor: pointer;
}

.checked + label {
    color: red;
}
}

JavaScript

var radio_one = $('#input-one')[0];
var radio_two =  $('#input-two')[0];

radio_one.addEventListener('change',changeHandler,false);
radio_two.addEventListener('change',changeHandler,false);

function changeHandler(e){
    setChecked('group');
}

function setChecked( groupName ) {
    var radios = document.getElementsByName( groupName ),
        radio;
    for( i = 0; i < radios.length; i++ ) {
        radio = radios[i];
        if (radio.checked) {
            addClass(radio);
        } else {
            removeClass(radio);
        }
    }
}

function addClass(elem){
    elem.className += " checked";
}

function removeClass(elem){
    elem.className = elem.className.replace( /(?:^|\s)checked(?!\S)/g , '' )
}