Appending the text's of those check boxes whose Property name is "id"

Rajnilari2015
Posted by Rajnilari2015 under jQuery category on | Points: 40 | Views : 360
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() + ","

Comments or Responses

Login to post response