JSFiddle - React, Tailwind, and code Playground

by aquadk

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<form>
		<ul>
			<li>
				<input id="radio1" type="radio" name="radio[]" value="1">
				<label for="radio1">one</label>
			</li>
			<li>
				<input id="radio2" type="radio" name="radio[]" value="2">
				<label for="radio2">two</label>
			</li>
			<li>
				<input id="radio3" type="radio" name="radio[]" value="3">
				<label for="radio3">three</label>
			</li>
			<li>
				<input id="radio4" type="radio" name="radio[]" value="4">
                <label for="radio4">four</label>
			</li>
			<li>
				<input id="radio5" type="radio" name="radio[]" value="5">
				<label for="radio5">five</label>
			</li>
		</ul>
</form>

CSS

form { max-width:500px; margin-top:25px;}
form ul li { display:inline-block; width:20%;text-align:center; vertical-align: top; float:left; position:relative }
input { position:relative; top:0;left:50%;margin-left:-6px; display:none; }
input[type=radio]:checked + label::before {
content: '';
position: absolute;
border-radius:100%;
left: 50%;
top:0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color:red;
} 
input[type=radio] + label::before {
content: '';
position: absolute;
border-radius:100%;
left: 50%;
top:0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color:gray;
} 
label { padding-top:55px; }
/*this class should be added*/
input[type=radio] + label.abc::before { background-color:red; }

JavaScript

$(document).ready(function(e) {
	
	$("input[type=radio]").click(function(){
		$('form ul li input[type=radio] + label').addClass('abc');
	}) 	
});