The below program will append the text's of those radio buttons whose Property name is "id"
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script>
var values = "";
var texts = "";
$(document).ready(function () {
$("input[type='radiobutton']:checked") // putting a filter and accepting only those radiobuttons which are checked
.each(function() //.each -> iteration over objects in JQuery way
{
values += $(this).val() + ","; //val() function gets the current state values of checked radiobutton elements. It is "ON".
var prop = $(this).prop("id") ; //prop() function gets the value of the selected property (which is id here).
texts += $("label[for=" + $(this).prop("id") + "]").text() + ","; //The for attribute specifies which form element a label is bound to
});
alert(values);
alert(texts);
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input id="rd1" name="radios" type="radiobutton"/>
</td>
<td>
<label for="rd1">
First radiobutton
</label>
</td>
</tr>
<tr>
<td>
<input id="rd2" name="radios" type="radiobutton"/>
</td>
<td>
<label for="rd2">
Second radiobutton
</label>
</td>
</tr>
<tr>
<td>
<input id="rd3" name="radios2" type="radiobutton"/>
</td>
<td>
<label for="rd3">
Third radiobutton
</label>
</td>
</tr>
<tr>
<td>
<input id="rd4" name="radios2" type="radiobutton"/>
</td>
<td>
<label for="checkBox4">
Fourth radiobutton
</label>
</td>
</tr>
</table>
</body>
</html>
Let us understand the code snippet step by step
$("input[type='radiobutton']:checked") The above places a filter and accept only those radiobutton which are checked
.each(function() {.....}); each -> iteration over objects in JQuery way
$("label[for=" The for attribute specifies which form element a label is bound to
$(this).prop("id") prop() function gets the value of the selected property (which is id here). The prop() [
http://api.jquery.com/prop/ ] function was introduced in JQuery 1.6
texts += $("label[for=" + $(this).prop("id") + "]").text() + ","