jQuery代碼來獲得HTML標記

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的檢查給出的子節點值選擇的childNodes。jQuery代碼來獲得HTML標記

<!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（唯一Indentiifer）值。關於選擇我需要能夠在我選擇的節點只獲取子節點的價值，也許點擊一個按鈕來運行jQuery代碼父和子節點。你可以幫助我使用Jquery代碼，即使它們被選中，它也可以給我選中的複選框值（僅限子節點），忽略父複選框。 TreeView的HML標記在ABOVE中給出。

來源

2012-09-25 Ruruboy

不知道這是否是你想要的

演示：通過點擊該按鈕將返回有

所有子節點的GUIDhttp://jsfiddle.net/qHJYJ/

選擇父節點
孩子節點本身選擇

來源

2012-09-25 07:10:41 Neverever

謝謝你Neverever。驚人。 – Ruruboy

$('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 example code here

來源

2012-09-25 07:02:45

jQuery代碼來獲得HTML標記

回答

相關問題