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

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

身份证件
文件名
签署？
@foreach（模型中的var项目）
{
@项目Id
@item.DocumentName
@foreach（var登录项符号）
{
@标志
}
| 
}
@节脚本{
$（函数（）{
$（'.update'）。单击（函数（e）{
e、 预防默认值（）；
var signed=$（'input[name=“item.signed”]：checked'）.val（）；
警报（签名）；
});
$（'.clear'）。单击（函数（e）{
e、 预防默认值（）；
$（'.clear输入[type=“radio”]'）.prop（'checked'，false）；
});
});

}

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

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

如何解决这个问题

---

我正在为本例创建类似的代码。

您可以使用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>

身份证件
文件名
签署？
@for（int i=0；i

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

它将为每一行生成具有相同id和名称的html广播

<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>

asp for

属性将生成并设置导致问题的

id

和

name

html属性的值

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

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

删除属性的

asp，并动态设置默认选中选项

测试结果

这就解决了问题，谢谢。
<input type="radio" name="Sign_for_@item.Id" @(item.Sign==sign? "checked" : "") value="@sign" class="form-check-input" />

<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>