无法获取未选中的复选框值

Posted 2021-04-01

我在ASP.NET模型中有一个FieldItems字典，这个字典的值如下所示。

年龄 - 复选框，名称 - 文本，公司 - 文本

在我的视图文件中，我创建了基于键，值对的控件，这些控件在字典中可用。

<div class="row cloneMe">
    <table>
        @foreach (var item in Model.FieldItems)
        {
            <tr>
                @if (item.Value == "checkbox")
                {
                    <td>@item.Key</td>
                    <td> <input class="associationCheckbox" type="@item.Value" name="@item.Key" value="false" placeholder="@item.Key" /></td>
                }
                else if (item.Value == "number")
                {
                    <td>@item.Key</td>
                    <td> <input type="number" name="@item.Key" value="0" ng-required="true" placeholder ="@item.Key" /> </td>
                }
                else
                {
                    <td>@item.Key</td>
                    <td> <input type="text" name="@item.Key" value="" ng-required="true" placeholder ="@item.Key" /> </td>
                }
            </tr>
        }
    </table>
</div>


    <span>
        <button type="button" id="associationAdd" class="btn btn-success" style="float:none;cursor:pointer" ng-click="RemoveWidget()">AddPerson</button>
    </span>
    <span>
        <button type="button" id="associationRemove" class="btn btn-danger" style="float:none;cursor:pointer" ng-click="AddWidget()">Remove</button>
    </span>

添加到previousone，我可以根据按钮单击包含/删除所选字段，如下面的代码所示。

$("#associationAdd").on("click", function () {
    $(".cloneMe:last").clone(true).insertAfter(".cloneMe:last");
});

$("#associationRemove").on("click", function () {
    if ($(".cloneMe").length > 1) {
        $(".cloneMe:last").remove();
    }
});;

在ASP.NET页面上添加我的控件后，我正在读取控件值。

    [HttpPost]
    public ActionResult Index(FormCollection formCollection)
    {
        foreach (var key in formCollection.Keys)
        {
            var value = formCollection[key.ToString()];
        }

    }

点击提交按钮，我可以阅读姓名和年龄值。但是，我只能选中复选框值。如果我有三个复选框并且都未选中，则复选框的键不会显示在Acton Result的formCollection中。

我尝试了以下方法来设置复选框状态，但没有结果。

 $("input:checkbox[class=associationCheckbox]").each(function () {

        if ($(this).attr('checked')) {
            $(this).val('true');
        } else {
            $(this).val('false');
        }
    });

答案

为了使用jquery使用复选框的checked属性：

$(this).prop('checked', true);

如果您使用的是早于1.6的jquery版本，请使用

$(this).attr('checked', 'checked');

要检查是否选中了复选框，请使用：

$(function() {
    $('.associationbox').on('click', function() {
        if ($('.associationbox').prop('checked')) {
            alert('checked');
        }
    });
});

JSFIDDLE