JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Uniform.js/2.1.2/jquery.uniform.js"></script>
<table class="product-options">
<tr>
<td>
<input type="radio" name="" value="0" />
</td>
<td>radio index 0</td>
<td>status: <span class="status"></span></td>
</tr>
<tr>
<td>
<input type="radio" name="" value="1" />
</td>
<td>radio index 1</td>
<td>status: <span class="status"></span></td>
</tr>
<tr>
<td>
<input type="radio" name="" value="2" />
</td>
<td>radio index 2</td>
<td>status: <span class="status"></span></td>
</tr>
<tr>
<td>
<input type="radio" name="" value="3" />
</td>
<td>radio index 3</td>
<td>status: <span class="status"></span></td>
</tr>
<tr>
<td>
<input type="radio" name="" value="4" />
</td>
<td>radio index 4</td>
<td>status: <span class="status"></span></td>
</tr>
</table>
CSS
.product-options tr.selected {
background-color: rgba(0, 0, 0, 0.2);
}
input[type="radio"] {
visibility: hidden;
}
.radio span {
background-image: url(http://i.stack.imgur.com/w8FKd.png);
background-repeat: no-repeat;
}
.radio span.checked {
background-image: url(http://i.stack.imgur.com/rvOxg.png);
}
JavaScript
// http://stackoverflow.com/questions/35343032/updating-child-element-classes-when-table-row-is-clicked/35343313#35343032
// http://stackoverflow.com/questions/35358103/set-background-to-radio-button-when-active/35359823#35359823
$(function() {
$('input[type="radio"]').uniform();
$('.product-options tr').click(function() {
var tr = $(this),
radio = tr.find('td input[type=radio]'),
status = tr.find('.status'),
siblings = tr.siblings(),
otherRadios = siblings.find('td input[type=radio]'),
otherStatuses = siblings.find('.status');
tr.addClass('selected');
status.text('checked');
siblings.toggleClass('selected', false);
otherStatuses.text('unchecked');
$.uniform.update(radio.prop('checked', true));
$.uniform.update(otherRadios.prop('checked', false));
});
});