以下代码来自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.
答案 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");
}