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

正如上面给出的，我想知道您是否可以给我 Jquery 代码来遍历 HTML 标记并选择 GUID 中给出的已检查子节点值。 

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

斜体是区域（父节点），粗体是子节点。区域和子节点（它们是位置）都是复选框。
子节点的值采用 GUID（唯一标识符）值。在选择父节点和子节点时，我需要在选择节点后才能获取子节点的值，并且可能单击一个按钮来运行 JQuery 代码。你能帮我用 Jquery 代码吗？即使它们被选中，它也可以给我选择的复选框（仅子节点）的值，而忽略父复选框。TreeView 的 HML 标记在上面给出。

4

2 回答 2

1

不确定这是否是您想要的

演示：http: //jsfiddle.net/qHJYJ/

通过单击按钮将返回GUID所有具有

  • 已选择父节点
  • 子节点本身被选中
于 2012-09-25T07:10:41.477 回答
0 
$('input[type="checkbox"]').on('change', function() {
    var e = $(this);
    if (e.parents('li:eq(2)').length) {
        console.log('sub-checkbox found, value: ' + e.val());
    } else {
        console.log('parent checkbox has been changed, ignoring...');
    }
    console.log(e.attr('name'));
});​

jsFiddle 示例代码在这里

于 2012-09-25T07:02:45.683 回答