Please help me any one, I am not able to understand this code. [Resolved]

Posted by Kumarkrishna184 under jQuery on 12/2/2015 | Points: 10 | Views : 392 | Status : [Member] | Replies : 3
What is happening here......
Why prop() has used here?

$("input:checkbox[name=Option]:checked").each(function () {
values += $(this).val() + ",";
texts += $("label[for=" + $(this).prop("id") + "]").text() + ",";
});


Thanks and Regards,
Krishna

Thanks and Regards,
Krishna Kumar



Responses

Posted by: Poster on: 12/2/2015 [Member] Starter | Points: 50

Up
1
Down

Resolved
This is jQuery code and the .prop() function of jQuery is used to get the property value of the element in jQuery. In this case, it is taking the id element value of the element and retrieving its text.

So the 3rd line of code is retrieving the <label> element text whose "for" property is the "id" of the checkbox that is checked.

The first line of code says that select all input element but filter only those that is of checkbox type and name property is Option that is checked. To understand the 1st line of code I found this post useful http://techfunda.com/Howto/jquery/227/elementattribute-value-attribute-equals-to.

Thanks

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rajnilari2015 on: 12/2/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
1
Down

Resolved
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

$(this).val()

val() function gets the current state values of checked check box elements. It is "ON" for the checked ones.

values += $(this).val() + ",";

Here a string concatenation is happening for the selected check boxes.

$("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() + ","

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

A full working version is presented below

<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>


Hope this helps

--
Thanks & Regards,
RNA Team

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kumarkrishna184 on: 12/2/2015 [Member] Starter | Points: 25

Up
0
Down
Thanks now i am very clear....

Thanks and Regards,
Krishna Kumar

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response