Inside of your <head></head>
tags add...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[type=radio]').change(function() {
$('input[type=radio]').each(function(index) {
$(this).closest('tr').removeClass('selected');
});
$(this).closest('tr').addClass('selected');
});
});
</script>
EDIT: The placement inside of <head></head>
is not the only option...this could just as easily be placed RIGHT before the closing </body>
tag. I generally try and place my JavaScript inside of head
for placement reasons, but it can in some cases slow down page rendering so some will recommend the latter approach (before closing body
).