JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<p>1. User Firefox (e.g. 34) or Chrome (e.g. 39)</p>
<p>2. Hover Choice3</p>
<p>3. Press mouse and select Text of 'Choice 3'</p>
<p>4. release mouse</p>
<p>5. click 'show selected value'</p>
<p>result: Choice 3 looks selected, but isnt.<br />This also can happen without selecting text by just on-mouse-down and leaving the choice element. But this is only reproducable by accident, but happens quite often to user, which are in a hurry and 'slipping' of the form element.</p>

<form id="myForm">
<div id="radio">
    <input type="radio" id="radio1" name="myRadio" value="choice1"/><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="myRadio" value="choice2"/><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="myRadio" value="choice3"/><label for="radio3">Choice 3</label>
</div>
</form>
<p>
    <a href="javascript:alert('Value:'+$('input[name=\'myRadio\']:checked', '#myForm').val());">show selected value</a>
</p>

JavaScript

$(function() {
$( "#radio" ).buttonset();
});