Demo of reading slected radio button using JQuery
CSS
<style>
.lb{
text-align:left;
FONT-SIZE: 14px;
font-weight: normal; color: #4c4c4c;
font-family: Verdana;
position: relative;
}
</style>
HTML
<form id='f1'>
<table>
<tr><td>
<input type='radio' name='options' id='opd1' value='option1' > <label for='opd1' class='lb'>Option one</label> <input type='radio' name='options' id='opd1' value='option1' >
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt2' value='option2' > <label for='opt2' class='lb'>Option two </label> <input type='radio' name='options' id='opt2' value='option2' >
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt3' value='option3' checked> <label for='opt3' class='lb'>Option three </label> <input type='radio' name='options' id='opt3' value='option3' checked >
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt4' value='option4' > <label for='opt4' class='lb'>Option four</label> <input type='radio' name='options' id='opt4' value='option4' >
</td></tr>
</table>
</form>
</div>
<div class="col-md-4"><div id='d1' style="position:absolute;"></div></div>
</div>
jquery
<script>
$(document).ready(function() {
$("input:radio[name=options]").click(function() {
$("#d1").css("background-color", "yellow"); // change the color of the background
$('#d1').html($(this).val());
})
})
</script>