JSFiddle - React, Tailwind, and code Playground
HTML
<div id="radio_wrapper">
<span class="radio">
<label for="myRadio1" class="myRadio">Some text 1 </label>
<input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
</span>
<span class="radio">
<label for="myRadio2" class="myRadio">Some text 2 </label>
<input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
</span>
<span class="radio">
<label for="myRadio3" class="myRadio">Some text 3 </label>
<input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
</span>
</div
CSS
span.radio {
background-color: #cccccc;
}
span.previousGreen {
background-color: #ccffcc;
}
span.currentGreen {
background-color: #00ff00;
}
JavaScript
$('.myRadio').change(function() {
$('.currentGreen').removeClass('currentGreen');
if ($(this).is(':checked')) {
$(this).parent().addClass('currentGreen');
}
});