MVC 验证复选框

问题描述

我正在尝试确保此列表中至少有一个“输入”复选框被选中，大约有 10 个项目，但我不确定如何执行此操作？我需要在模型中添加标志吗？

 <div>* Data</div>
 @Html.ValidationMessageFor(x => x.flgData,"",new { @class = "text-danger" })
    <ul>
     @foreach (var item in Model.listofData)
     {
          <li>
               <input type="checkBox" value="@item.Value" name="chk" />
               <label asp-for="@item.Selected">@Html.Raw(@item.Name)</label>
               <input type="hidden" asp-for="@item.DictionaryId" />
               <input type="hidden" asp-for="@item.Name" />
          </li>
     }
    </ul>

解决方法

您可以遍历所有复选框并检查它是否被选中

HTML

<input type="button" id="btnSubmitCB" value="Submit" class="btn btn-primary" />
<input type="checkbox" class="chkbox" value="Bike" /> Bike
<input type="checkbox" class="chkbox" value="Car" /> Car
<input type="checkbox" class="chkbox" value="Boat" /> Boat

JQuery

$(document).ready(function () { 

    $('#btnSubmitCB').click(function () {
        var cbChecked = false;
        $('input[type=checkbox]').each(function () {
            if (this.checked) {
                cbChecked = true;
                return false;
            }
        });

        if (cbChecked) {
            alert("At least one checkbox is checked");
        }
        else {
            alert("No checkbox is checked");
        }

    });

});

另一种不使用 .each 函数的方法

$(document).ready(function () { 
    $('#btnSubmitCB').bind("click",function () {
        let checkedCount = $('input[type=checkbox]:checked').length;
        if (checkedCount == 0) {
            alert("no checkbox has been checked")
        }
        else {
            alert("checkbox has been checked");
        }
    });
});