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

Question

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

我的要求是用 Javascript 编写验证，这样我们需要在 3 个 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>

我的部分视图-2：

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

我的部分视图-3：

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

标签： javascriptc#asp.net-mvcasp.net-coremodel-view-controller

Answer 1

我的要求是用 Javascript 编写验证，这样我们需要在 3 个 PartialView 中的任何一个中选择至少一个复选框

您可以使用 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>
    }

截图如下：