JSFiddle - React, Tailwind, and code Playground

by abrkn

HTML

<div>
<label><input type="radio" name="a" value="1" checked="checked" />One</label>
<label><input type="radio" name="a" value="2" />Two</label>
<label><input type="radio" name="a" value="3" />Three</label>
</div>

<div>
<label><input type="radio" name="b" value="10" />Uno</label>
<label><input type="radio" name="b" value="20" />Dos</label>
<label><input type="radio" name="b" value="33" />Tres</label>
</div>

CSS

div { padding: 50px; }
input { margin-left: 15px; }

JavaScript

// http://stackoverflow.com/questions/5246012/javascript-jquery-deselecting-radio-buttons
$('input').click(function() {
  var $t = $(event.target);
  if ($t.hasClass('checked')) $t.removeAttr('checked');
  else $('input[type="radio"][name="' + $t.prop('name') + '"]').not($t).removeClass('checked');
  $t.toggleClass('checked');
}).filter(':checked').addClass('checked');