jQuery在MVC视图中检查所有动态复选框 [英] Jquery check all dynamic checkboxlist in MVC view
问题描述
最近,我创建了此动态复选框列表,并将其显示在C#MVC Razor视图中.
Recently I created this dynamic checkboxlist and display them in C# MVC Razor view.
<ul>
@for (int i = 0; i < Model.sites.Count; i++)
{
<li>
@Html.CheckBoxFor(m => m.sites[i].IsCheck)
@Html.LabelFor(m => m.sites[i].IsCheck, Model.sites[i].SiteName)
@Html.HiddenFor(m => m.sites[i].SiteId)
@Html.HiddenFor(m => m.sites[i].SiteName)
</li>
for (int j = 0; j < Model.sites[i].Roomz.Count; j++)
{
@Html.CheckBoxFor(m => m.sites[i].Roomz[j].IsCheck)
@Html.LabelFor(m => m.sites[i].Roomz[j].IsCheck, Model.sites[i].Roomz[j].RoomName)
@Html.HiddenFor(m => m.sites[i].Roomz[j].RoomId)
@Html.HiddenFor(m => m.sites[i].Roomz[j].RoomName)
}
}
</ul>
下面的图像是复选框的显示
below image is the display of the checkboxes
如何使用jquery来检查sites.ischeck来检查同一站点下的所有这些子项目?例如,检查CO2还将检查套件1& 2
How do i use jquery on check the sites.ischeck to check all those sub-item under the same sites? example check CO2 will also check suite 1&2
推荐答案
修改html,以便您可以使用相对选择器,包括在复选框中添加类名.
Modify the html so that you can use a relative selector including adding class names to the checkboxes.
<ul>
@for (int i = 0; i < Model.sites.Count; i++)
{
<li>
@Html.CheckBoxFor(m => m.sites[i].IsCheck, new { class = "parent" })
@Html.LabelFor(m => m.sites[i].IsCheck, Model.sites[i].SiteName)
@Html.HiddenFor(m => m.sites[i].SiteId)
@Html.HiddenFor(m => m.sites[i].SiteName)
<div> // suggest you style this to give a margin-left so its indented relative to the parent
for (int j = 0; j < Model.sites[i].Roomz.Count; j++)
{
@Html.CheckBoxFor(m => m.sites[i].Roomz[j].IsCheck, new { class = "child" })
@Html.LabelFor(m => m.sites[i].Roomz[j].IsCheck, Model.sites[i].Roomz[j].RoomName)
@Html.HiddenFor(m => m.sites[i].Roomz[j].RoomId)
@Html.HiddenFor(m => m.sites[i].Roomz[j].RoomName)
}
<div>
</li>
}
</ul>
然后,您可以处理父"复选框的.change()
事件,并在同一<li>
元素内获取子"复选框
Then you can handle the .change()
event of the 'parent' checkbox and get the 'child' checkboxes within the same <li>
element
$('.parent').click(function() {
var isChecked = $(this).is(':checked');
var children = $(this).closest('li').find('.child');
$.each(children, function(index, item) {
$(this).prop('checked', isChecked);
});
});
您可能还需要处理子复选框,这样,如果您取消选中任何子复选框,那么父复选框也将被取消选中;或者,如果您选中一个孩子,并且所有子复选框也都被选中,则父复选框也将被选中.将被检查.
You will probably also want to handle the the child checkboxes as well, so that if you uncheck any child, the parent will also be unchecked, or if you check a child, and all the children are also checked, the the parent will be checked.
$('.child').click(function () {
var parent = $(this).closest('li').find('.parent');
var isChecked = $(this).is(':checked');
if (!isChecked) {
// the parent must be unchecked
parent.prop('checked', false);
} else {
// check if all siblings have the same checked status
var siblings = $(this).siblings('.child');
var total = siblings.length;
var matches = siblings.filter(function () {
return $(this).prop('checked') == isChecked;
}).length;
if (matches === total) {
parent.prop('checked', isChecked);
}
}
})
这篇关于jQuery在MVC视图中检查所有动态复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!