Demo of Reading extra attributes of radio buttons with data-*

HTML

<table>
<tr><td>
<input type='radio' name='options' id='opt1' value='option1' data-name='my_option' data-group=first data-type=sel1 >
	  <label for='opt1' class='lb'>Option one </label>
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt2' value='option2' data-name='my_option' data-group=second data-type=sel2> 
	  <label for='opt2' class='lb'>Option two </label>
</td></tr>

<tr><td>
<input type='radio' name='options' id='opt3' value='option3' data-name='my_option' data-group=third data-type=sel3 checked> 
	  <label for='opt3' class='lb'>Option three </label>
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt4' value='option4' data-name='my_option' data-group=fourth data-type=sel4 > 
	  <label for='opt4' class='lb'>Option four</label>
</td></tr>

</table>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$("input:radio[name=options]").click(function() {
 var str = " name="+$(this).data('name');
    str +=", group="+$(this).data('group'); 
	str +=", qty="+$(this).data('type'); 
	str += ",id="+$(this).attr('id');
    str += ", name= "+$(this).attr('name');

	$( "#t1" ).html(str);
})
////////////////
})
</script>