JSFiddle - React, Tailwind, and code Playground
HTML
<table class="monitored_table">
<tr>
<td>Text1</td>
<td>
<input type="radio" name="group1" value="1">
</td>
</tr>
<tr>
<td>Text2</td>
<td>
<input type="radio" name="group1" value="2">
</td>
</tr>
<tr>
<td>Text3</td>
<td>
<input type="radio" name="group1" value="3">
</td>
</tr>
</table>
JavaScript
var inputClickHandler = function() {
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked') {
$(this).prop('checked', false);
$(this).attr('previousValue', false);
$(this).checkboxradio("refresh"); //This refreshes it for some reason
} else {
$("input[name=" + name + "]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
};
$("input[type='radio']").click(inputClickHandler);
$('.monitored_table tbody tr').click(function(event) {
if (event.target.type !== 'radio') {
$(':radio', this).trigger("click");
}
});
console.log("OnLoad");