选择子级或父级时,切换选中/取消选中复选框?

时间:2012-09-26 23:21:52

标签: jquery jquery-ui jquery-selectors telerik

以下代码来自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.

1 个答案:

答案 0 :(得分:1)

我建议首先给父复选框一个唯一的标识符/类,并为其子项提供相同的内容。

我跟

一起去吧
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");
}