Below is the HTML code for a Telerik Tree View Control used in a ASP.NET MVC application. I need to get the value (input tags values are in GUID format) of the ChildNode when a child node checkbox is selected.
Illlustrated below:
*Main Region*
**North VAncouver
testlocation2
Testlocation123**
*Africa*
**Tanzania
Headquarters**
*India*
**Items Gobetter
Mash
YouThinkSo**
*Canada*
**WestVancouver**
AS given above I was wondering if you could give me the Jquery code to iterate through the HTML markup and select checked child node values given in GUID’s.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title></title>
</head>
<body>
<ul>
<li>
<span id="spnloc">Locations</span>
<div style=
"position: absolute; padding-top: 5px; background-color: rgb(234, 234, 234); color: rgb(63, 138, 196); z-index: 2000; display: none;"
id="TreeView1" class="t-widget t-treeview t-reset">
<ul class="t-group t-treeview-lines">
<li class="t-item t-first">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[0].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Main Region" name=
"TreeView1_checkedNodes[0].Text" class="t-input" /><input type="hidden"
value="Main Region" name="TreeView1_checkedNodes[0].Value" class=
"t-input" /></span><span class="t-in">Main Region</span><input type=
"hidden" value="Main Region" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="0:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:0].Checked" class=
"t-input" /></span><span class="t-in">North
Vancouver</span><input type="hidden" value=
"5761a893-9ef0-48d3-847a-2638ec081f5f" name="itemValue" class=
"t-input" />
</div>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="0:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:1].Checked" class=
"t-input" /></span><span class="t-in">testLocation2</span><input type=
"hidden" value="d63d6ff6-07dc-4021-a4bb-7b1b7c781119" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="0:2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:2].Checked" class=
"t-input" /></span><span class=
"t-in">TestLocations123</span><input type="hidden" value=
"eadfd0f5-9181-4094-b01a-9d7ee383b7f2" name="itemValue" class=
"t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[1].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Africa" name=
"TreeView1_checkedNodes[1].Text" class="t-input" /><input type="hidden"
value="Africa" name="TreeView1_checkedNodes[1].Value" class=
"t-input" /></span><span class="t-in">Africa</span><input type="hidden"
value="Africa" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="1:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[1:0].Checked" class=
"t-input" /></span><span class="t-in">Tanzania</span><input type="hidden"
value="5c2389eb-365e-42bb-9b1a-8db36f87b4af" name="itemValue" class=
"t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="1:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[1:1].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Headquarters" name=
"TreeView1_checkedNodes[1:1].Text" class="t-input" /><input type=
"hidden" value="ac171662-3eca-411f-a623-a3cb1a69238e" name=
"TreeView1_checkedNodes[1:1].Value" class=
"t-input" /></span><span class="t-in">Headquarters</span><input type=
"hidden" value="ac171662-3eca-411f-a623-a3cb1a69238e" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[2].Checked" class="t-input"
checked="checked" /><input type="hidden" value="India" name=
"TreeView1_checkedNodes[2].Text" class="t-input" /><input type="hidden"
value="India" name="TreeView1_checkedNodes[2].Value" class=
"t-input" /></span><span class="t-in">India</span><input type="hidden"
value="India" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="2:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:0].Checked" class=
"t-input" /></span><span class="t-in">Item's Go Here</span><input type=
"hidden" value="d8266db4-e846-4338-906f-e0b84fd9044a" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="2:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:1].Checked" class=
"t-input" /></span><span class="t-in">MASH</span><input type=
"hidden" value="869c083a-a17b-4a7a-a2a9-ef88f972de1b" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="2:2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:2].Checked" class=
"t-input" /></span><span class="t-in">YouThinkSo</span><input type=
"hidden" value="4e33e582-8a54-450a-ad73-70698a578162" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="3" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[3].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Canada" name=
"TreeView1_checkedNodes[3].Text" class="t-input" /><input type="hidden"
value="Canada" name="TreeView1_checkedNodes[3].Value" class=
"t-input" /></span><span class="t-in">Canada</span><input type="hidden"
value="Canada" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item t-last">
<div class="t-top t-bot">
<span class="t-checkbox"><input type="hidden" value="3:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[3:0].Checked" class=
"t-input" /></span><span class="t-in">West Vancouver</span><input type=
"hidden" value="b8fd4a6f-bfc7-4c8a-b2ff-cb3c278c7434" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
In italics are the Regions (Parent nodes) and in Bold are the child nodes. Both Region and child nodes(which are locations) are Checkboxes.
The values of the Child Nodes are in GUID (Unique Indentiifer) value.
ON selecting the the parent and child nodes I need to be able to only get the value of the child nodes after I select the nodes and maybe click a button to run the JQuery code. Can you help me with the Jquery code that will be able to give me the selected values of the checkboxes(child nodes only) ignoring the parent checkboxes even if they are selected. The HML markup for the TreeView is given ABOVE.
Not sure if this is what you want
Demo: http://jsfiddle.net/qHJYJ/
by clicking the button will return
GUIDof all children nodes that have