The below program will append the text's of those check boxes 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='checkbox']:checked") // putting a filter and accepting only those checkboxes which are checked
.each(function() //.each -> iteration over objects in JQery way
{
values += $(this).val() + ","; //val() function gets the current state values of checked checkbox 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="checkBox1" name="radios" type="checkbox"/>
</td>
<td>
<label for="checkBox1">
First Checkbox
</label>
</td>
</tr>
<tr>
<td>
<input id="checkBox2" name="radios" type="checkbox"/>
</td>
<td>
<label for="checkBox2">
Second Checkbox
</label>
</td>
</tr>
<tr>
<td>
<input id="checkBox3" name="radios2" type="checkbox"/>
</td>
<td>
<label for="checkBox3">
Third Checkbox
</label>
</td>
</tr>
<tr>
<td>
<input id="checkBox4" name="radios2" type="checkbox"/>
</td>
<td>
<label for="checkBox4">
Fourth Checkbox
</label>
</td>
</tr>
</table>
</body>
</html>
Let us understand the code snippet step by step
$("input[type='checkbox']:checked") The above places a filter and accept only those checkboxes 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() + ","