C# Jquery在MVC视图中检查所有动态复选框列表

最近，我创建了这个动态复选框列表，并在C#MVC Razor视图中显示它们

<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>

@对于（int i=0；i
@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）

对于（int j=0；jm.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）
}
}

下图是复选框的显示

---

如何使用jquery on check the sites.ischeck检查相同站点下的所有子项？示例check CO2还将选中suite 1和suite 2修改html，以便可以使用相对选择器，包括将类名添加到复选框中

<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>

您可能还希望处理子复选框，这样，如果您取消选中任何子项，则父项也将取消选中，或者如果您选中一个子项，并且所有子项都已选中，则父项也将被选中

$('.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);
        }
    }
})

---

修改html，以便可以使用相对选择器，包括向复选框添加类名

<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>

您可能还希望处理子复选框，这样，如果您取消选中任何子项，则父项也将取消选中，或者如果您选中一个子项，并且所有子项都已选中，则父项也将被选中

$('.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);
        }
    }
})

---

我认为你做得不对。您可以使用以下代码：

    <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)
          <ul>
               for (int j = 0; j < Model.sites[i].Roomz.Count; j++)
              {
                <li>
                   @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)

               </li>
              }    

         </ul>
      </li>

    }
     </ul>

---

我认为你做得不对。您可以使用以下代码：

    <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)
          <ul>
               for (int j = 0; j < Model.sites[i].Roomz.Count; j++)
              {
                <li>
                   @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)

               </li>
              }    

         </ul>
      </li>

    }
     </ul>

---

如果IsCheck为true，则应选中该框。请确保是这样。如果选中add attr（“disable”，“disable”）并选中内部的所有rest roomz，我尝试使用jquery来定位站点，但它不起作用，我指的是控制器发送的值……如果IsCheck为true，它应该选中该框。请确保是这样。如果选中add attr（“disable”，“disable”）并选中内部的所有rest roomz，我尝试使用jquery来定位站点，但它不起作用，我指的是控制器发送的值…请注意-您可能还希望处理用户选中或取消选中组中“子项”的情况，以便“父项”；也会更新-例如，如果他们选中了

CO2

，则此代码将选中

suite1

和

suite2

，但如果他们取消选中

suite2

，则您可能还希望取消选中

CO2

？-如果是这样，请让我知道，我可以添加处理该问题的代码以及备注-您可能还希望处理用户选中或取消选中组中“子项”的情况，以便“父项”；也会更新-例如，如果他们选中了

CO2

，则此代码将选中

suite1

和

suite2

，但如果他们取消选中

suite2

，则您可能还希望取消选中

CO2

？-如果是这样，请让我知道，我也可以添加处理该问题的代码