選擇孩子還是父母時，勾選/取消選中複選框？

-1

以下代碼來自Telerik Treeview控件。我需要能夠在選擇和取消選擇孩子時切換孩子。我需要能夠切換所有的孩子，當父母被選中和取消選擇。選擇孩子還是父母時，勾選/取消選中複選框？

<% Html.Telerik().TreeView() 
          .Name("MultiLocationPicker") 
          .ClientEvents(events1 => events1.OnSelect("MultiLocationPicker_Selected")) 
          .ClientEvents(events => events 
           .OnChecked("MultiLocationPicker_Checked") 
          ) 
          .HtmlAttributes(new { style = "position:absolute;padding-top:5px;background-color:#EAEAEA;color:#3F8AC4;z-index:2000;display:none" }) 
          .ShowCheckBox(true) 
          .BindTo(getAvailableLocations, mappings => 
         { 
          mappings.For<RegionEntity>(binding => binding 
           .ItemDataBound((item, region) => 
                { 
                 item.Text = region.RecordName; 
                 item.Value = ""; 
                 var regionNode = regionNodes.FirstOrDefault(e => e.Equals(region.RecordName)); 
                 var le = new List<LocationEntity>(region.Location); 
                 bool isChecked = false; 
                 foreach (var l in le) 
                 { 
                  if (userLocations.Contains(l.ID)) 
                  { 
                   isChecked = true; 
                  } 
                  else 
                  { 
                   isChecked = false; 
                   break; 
                  } 
                 } 

                 item.Checked = isChecked; 
                 item.Expanded = true; 

                }).Children(location => location.Location)); 
          mappings.For<LocationEntity>(binding => binding 
                     .ItemDataBound((item, location) => 
                          { 
                           item.Text = location.Name; 
                           item.Value = 
                            location.ID.ToString(); 
                           item.Checked = userLocations.Contains(location.ID); 

                          } 

                          )); 

         }).Render();%> 

    </li> 
    <input type="hidden" id="isDirty" value="false"/> 
    <% 
     } 
    %> 

    <script type="text/javascript"> 
     //<![CDATA[ 

     var allVals = []; 
     $('#spnloc').hover(function() { 
      $('#MultiLocationPicker').show(); 
     }); 
     $('#MultiLocationPicker').mouseenter(function() { 
      $('#MultiLocationPicker').show(); 

     }); 

     function MultiLocationPicker_Selected(e) { 

      var item = $(e.item); 
      var checkbox = item.find('.t-checkbox:first [type=checkbox]');     

      !checkbox.is(':checked') ? checkbox.attr('checked', 'checked') : checkbox.removeAttr('checked');          


     }             


HTML Markup for the above control given below:             


    <div style= 
    "position: absolute; padding-top: 5px; background-color: rgb(234, 234, 234); color: rgb(63, 138, 196); z-index: 2000;" 
    id="MultiLocationPicker" 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= 
      "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
      "checkbox" value="False" name="MultiLocationPicker_checkedNodes[0].Checked" 
      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= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_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= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_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= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_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= 
      "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
      "checkbox" value="False" name="MultiLocationPicker_checkedNodes[1].Checked" 
      class="t-input" /></span><span class="t-in">World</span><input type="hidden" 
      value="World" 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= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_checkedNodes[1:0].Checked" class= 
       "t-input" /></span><span class="t-in">Sydney GMT+10</span><input type= 
       "hidden" value="ca1033d4-a9ca-4e16-96ea-3b92ab6e1c52" 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= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_checkedNodes[1:1].Checked" class= 
       "t-input" /></span><span class="t-in">USA</span><input type="hidden" value= 
       "a5261a17-9696-471c-a39a-af11b14bd546" 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= 
      "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
      "checkbox" value="False" name="MultiLocationPicker_checkedNodes[2].Checked" 
      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="2:0" name= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_checkedNodes[2:0].Checked" class= 
       "t-input" /></span><span class="t-in">Africa</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="2:1" name= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="True" name= 
       "MultiLocationPicker_checkedNodes[2:1].Checked" class="t-input" checked= 
       "checked" /><input type="hidden" value="Headquarters1" name= 
       "MultiLocationPicker_checkedNodes[2:1].Text" class="t-input" /><input type= 
       "hidden" value="ac171662-3eca-411f-a623-a3cb1a69238e" name= 
       "MultiLocationPicker_checkedNodes[2:1].Value" class= 
       "t-input" /></span><span class="t-in">Headquarters1</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="3" name= 
      "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
      "checkbox" value="False" name="MultiLocationPicker_checkedNodes[3].Checked" 
      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="3:0" name= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_checkedNodes[3:0].Checked" class= 
       "t-input" /></span><span class="t-in">Gurgaon</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="3:1" name= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_checkedNodes[3:1].Checked" class= 
       "t-input" /></span><span class="t-in">MASHALLAAH</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="3:2" name= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_checkedNodes[3: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="4" name= 
      "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
      "checkbox" value="False" name="MultiLocationPicker_checkedNodes[4].Checked" 
      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="4:0" name= 
       "MultiLocationPicker_checkedNodes.Index" class="t-input" /><input type= 
       "checkbox" value="False" name= 
       "MultiLocationPicker_checkedNodes[4: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>

議題和問題：

On selecting a child node I want the checkbox to get selected/checked in toggle state? 
    On selected a parent node I want the checkboxes of the parent and the children to get selected/checked in toggle state.     
    I have tried doing it with the Jquery code above in function    MultiLocationPicker_Selected .         
Can you tell me how to refactor the code to achieve this functionality.

來源

2012-09-26 Ruruboy

線的東西請郵寄相關** **渲染HTML作爲Telerik的語法並沒有告訴我們生成的HTML是什麼因此任何jQuery都將基於DOM結構的假設並且很可能是不正確的。 – Nope

@Francois - 我發佈了相關的HTML，請你回覆。 – Ruruboy

我建議首先給父複選框的孩子的唯一標識符/類相同。

生病去

Parent Checkbox: <input type='checkbox' class='parent1'/> 

    Child1:<input type='checkbox' /> 
    Child2:<input type='checkbox' /> 
    Child3:<input type='checkbox' /> 
    Child4:<input type='checkbox' />

然後做沿着

if($(".parent1").prop("checked")) { 
    $(".parent > input").prop("checked","true"); 
} else { 
    $(".parent > input").prop("checked","false"); 
}

來源

2012-09-27 00:05:30

我不能給複選框一個唯一的標識符。這是treeview呈現HTML的方式。請提前致謝，你能改善你的答案嗎？ – Ruruboy

選擇孩子還是父母時，勾選/取消選中複選框？

回答

相關問題