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

Question

我正在使用 Razor 语法（在 ASP.NET Core 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>

}

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

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

如何解决这个问题？

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

标签： javascriptc#jqueryasp.net-core

Answer 1

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

它将为每一行生成具有相同 ID 和名称的 html 收音机。

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

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

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

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

<input type="radio" name="[e-mail]" @(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>

测试结果