如何获取单选按钮值并清除表中选中的单选按钮

Question

我正在表中创建多个单选按钮，使用 Razor 语法（在 ASP.NET 核心 MVC 下）。

<table class="table table-striped table-hover table-bordered table-sm custom-font">
    <thead>
        <tr>
            <th>Id</th>
            <th>Document Name</th>
            <th>Signed?</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.DocumentName</td>
                <td>
                    @foreach (var sign in item.Signs)
                    {
                        <div class="form-check form-check-inline">
                            <input type="radio" asp-for="@item.Sign" value="@sign" class="form-check-input" />
                            <label class="form-check-label">@sign</label>
                        </div>
                    }
                    <div class="text-center">
                        <a href="@Url.Action("UpdateSigned", "Document")" class="update" data-id="@item.Id">Update</a> | <a href="#" class="clear">Clear</a>
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>
@section Scripts {
<script>
    $(function () {
        $('.update').click(function (e) {
            e.preventDefault();
            var signed = $('input[name="item.Signed"]:checked').val();
            alert(signed);
        });

        $('.clear').click(function (e) {
            e.preventDefault();
            $('.clear input[type="radio"]').prop('checked', false);
        });
    });
</script>

}

每行都有更新和清除链接，用于更新记录并清除每行选中的单选按钮。

问题是，从 razor 语法中，它将为每一行生成具有相同 id 和名称的 html 无线电。 所以我无法检查每行的单选并清除选中的单选按钮。

如何解决这个问题？

对于这种情况，我正在jsfiddle中创建类似的代码。

Answer 1

<input type="radio" asp-for="@item.Sign" value="@sign" class="form-check-input" />

它将为每行生成具有相同 ID 和名称的 html 无线电。

asp-for属性将为id和name html 属性生成并设置值，这会导致问题。

每行都有更新和清除链接，用于更新记录并清除每行选中的单选按钮。

为了达到您的要求，您可以尝试：

删除asp-for属性，并动态设置默认选中选项

<input type="radio" name="Sign_for_@item.Id" @(item.Sign==sign? "checked" : "") value="@sign" class="form-check-input" />

修改js代码找到父td元素，然后找到单选按钮

<script>
    $(function () {
        $('.update').click(function(e) {
            e.preventDefault();
            var signed = $(this).parent().parent().find('input[type="radio"]:checked').val();
            alert(signed);
        });

        $('.clear').click(function(e) {
            e.preventDefault();
            $(this).parent().parent().find('input[type="radio"]').prop('checked', false);
        });
    })
</script>

测试结果

Answer 2

您可以使用 for 循环而不是 foreach 并利用索引号为每行创建唯一的 Id。

<table class="table table-striped table-hover table-bordered table-sm custom-font">
<thead>
    <tr>
        <th>Id</th>
        <th>Document Name</th>
        <th>Signed?</th>
    </tr>
</thead>
<tbody>
    @for(int i = 0; i < Model.Count; i++)
    {
        var item = Model[i];
        <tr>
            <td>@item.Id</td>
            <td>@item.DocumentName</td>
            <td>
                @foreach (var sign in item.Signs)
                {
                    <div class="form-check form-check-inline">
                        <input type="radio" name="item.Sign@i" id="@item.Sign@i" value="@sign" class="form-check-input" />
                        <label class="form-check-label">@sign</label>
                    </div>
                }
                <div class="text-center">
                    <a href="@Url.Action("UpdateSigned", "Document")" class="update" data-id="@item.Id">Update</a> | <a href="#" class="clear">Clear</a>
                </div>
            </td>
        </tr>
    }
</tbody>

您可以在更新和清除按钮上使用 onclick 属性，并将行号作为参数传递，而不是 jquery 事件侦听器。 但我不确定这是否是正确的解决方案。