验证每个 3 个不同局部视图中的复选框列表

Question

我在 3 个不同的局部视图中有一个复选框列表
即，在 PartialView-1 中，我有一些复选框和
在 PartialView-2 中，我有一个不同的 CheckBoxes 列表和
在 PartalView-3 中，我有一个不同的复选框列表。

我的要求是在 Javascript 中编写验证，这样我们需要 select 在 3 个 PartialView 中的任何一个中至少 select 一个复选框，如果不需要抛出错误信息

我的 PartialView-1：

<div id = "PartialView1">
    <label>PartialView1</label>
    <div id="dias">
        <div id="diast">
            @if (IsUpper)
            {
                <div>
                    <div>
                        <div>
                            <span>Data1</span>
                        </div>
                    </div>

                    @for (var index = 0; index < 4; index++)
                    {
                        var labelNumber = Model.Data[index].Label;
                        if (index == 0)
                        {
                            <div>
                                <div>
                                    <label>@labelNumber</label>
                                </div>
                            </div>
                        }
                        else
                        {
                            <div>
                                <div>
                                    <div>
                                        @Html.CustomCheckBoxFor(m => Model.Data[index].Close, new SelectListItem { Name = Html.NameFor(m => m.Data[index].Close).ToString() }, null, false)
                                    </div>
                                    <label>@labelNumber</label>
                                </div>
                            </div>
                        }

                    }
                    @for (var index = 4; index < 8; index++)
                    {
                        var labelNumber = Model.Data[index].Label;

                        <div>
                            <div>
                                @if (index == 4)
                                {
                                    <div class="ver></div>
                                }
                                <div>
                                    @Html.CheckBoxFor(m => Model.Data[index].Close, new SelectListItem { Name = Html.NameFor(m => m.Data[index].Close).ToString() }, null, false)
                                </div>
                                <label>@labelNumber</label>
                            </div>
                        </div>
                    }
                    <div>
                        <div><span>Lower</span></div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

我的 PartialView-2：

<div id="PartialView2">
  ***same code as PartialView1***
</dv>

我的 PartialView-3：

<div id="PartialView3">
  ***same code as PartialView1***
</dv>

Answer 1

My requirement is to write validation in Javascript in such a way that we need to select at least one checkbox to be select either in any of the 3 PartialViews

您可以使用 JQuery 从局部视图中获取选中的复选框数，然后根据选中的复选框数显示错误消息：

代码如下：

    <form asp-action="Index">

        <partial name="pv_CheckboxList" model="@ViewData["checkboxlist"]" />
        <partial name="_pvcheckboxlist2" model="@ViewData["checkboxlist"]" />
        <partial name="_pvcheckboxlist3" model="@ViewData["checkboxlist"]" />


        <input type="submit" id="btnsubmit" />

    </form>

    @section Scripts{ 
    <script type="text/javascript">
        $(function () {
            $("#btnsubmit").click(function () {
                var selectedcount = $('#PartialView1').find('input[type=checkbox]:checked').length
                    + $('#PartialView2').find('input[type=checkbox]:checked').length +
                    $('#PartialView3').find('input[type=checkbox]:checked').length;


                if (selectedcount == 0) {
                    event.preventDefault(); //Not select checkbox, prevent the default submit event.
                    alert('Please select at least one checkbox');
                }
            });
        });
    </script>
    }

或使用 JavaScript 脚本：

        <input type="submit" id="btnsubmit" onclick="validatecheckbox();" />

    @section Scripts{ 
    <script type="text/javascript">
        function validatecheckbox() {
            var selectedcount = document.getElementById("PartialView1").querySelectorAll('input[type="checkbox"]:checked').length
                + document.getElementById("PartialView2").querySelectorAll('input[type="checkbox"]:checked').length
                + document.getElementById("PartialView3").querySelectorAll('input[type="checkbox"]:checked').length;
            if (selectedcount == 0) {
                event.preventDefault();
                alert('Please select atleast one checkbox');
            }

        }; 
    </script>
    }

截图如下：

验证每个 3 个不同局部视图中的复选框列表

Validation for list of checkboxes in each3 different partial views

javascript

c#

model-view-controller

asp.net-mvc

asp.net-core