JQuery 循环不选取选中的复选框

Question

我有一个循环，它应该绕过我拥有的四个复选框，并且对于每个被选中为 false 的复选框，它应该在计数中添加一个。然而，这不起作用。它似乎只围绕一个复选框循环。谁能帮我找出原因吗？

JQuery:

 $("#CreateUserButton").on('click', function () {
            var rt = false;
            var count = 0;
            $(".RoleCheck").each(function () {
                if ($(".RoleCheck").prop('checked') == false) {
                        count = count + 1;
                        alert("Added one");
                }
            });
            if (count == 4) {
                alert("All four been detected");
                $("#ModalErrorText").html("Error : A Role has not been selected.");
                rt = false;
            }
            $("#ErrorBox").prop('hidden', rt);
            return rt;
        });

HTML:

<div class="col-md-10" id="createButton">
                @foreach (var item in (SelectList)ViewBag.RoleId) {
                    <input type="checkbox" name="SelectedRoles" value="@item.Value" class="checkbox-inline RoleCheck" />
                    @Html.Label(item.Value, new { @class = "control-label" })
                }
            </div>

我知道它与 HTML 中创建选择框的 foreach 循环有关。

Answer 1

在this上下文中执行循环，回调在当前DOM元素的上下文中触发，因此关键字this引用该元素。

$(".RoleCheck").prop('checked') 将始终返回第一个复选框的 checked 状态。

$(".RoleCheck").each(function () {
    //this.checked can also be used
    if ($(this).prop('checked') == false) {
            count = count + 1;
            alert("Added one");
    }
});

但是，可以使用 length 属性来简化循环。

var count = $(".RoleCheck:not(:checked)").length;