如何在表格中动态呈现单选按钮？

Question

我是 mvc5 的新手。我面临的一个问题是我想在表格中渲染一些行，每行都有一个单选按钮。如果我单击或选中单选按钮，那么它将在该行中显示一张图片。现在的问题是，我试图通过单击来测试每一行，但结果只有一行显示警报，这只是第一行。我不知道的问题在哪里？你能帮我找出问题吗？

@if (Model != null) { 
foreach (var item in Model) {
    <tr style="vertical-align:middle">
        <td style="vertical-align:middle">
            @Html.DisplayFor(modelItem => item.CandId)
        </td>
        <td style="vertical-align:middle">
            @Html.DisplayFor(modelItem => item.CandName)
        </td>
        <td style="vertical-align:middle">
            @Html.HiddenFor(modelItem => item.Position, new {id="ps" })
        </td>
        <td style="vertical-align:middle">
            <img src="/Ballot/RetrieveImage/@item.id" alt="" height=50 width=50/>
            @*@Html.DisplayFor(modelItem => item.cand_symbol)*@
        </td>
        <td style="vertical-align:middle; text-align:center;">
           @Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { id="rd",name="rd"})
            <img src="" height="50" width="50" id="picture" hidden />
    </tr>
}
}
  $("#rd").click(function () {
                $('#picture').attr('src', '/Images/vt.png');
                var ps = $('#ps').val();
                alert(ps);
                $(picture).show();
   });

Answer 1

您正在渲染具有相同 ID 的多个元素，这是它无法正常工作的原因，它总是会为它在 DOM 中找到的具有该 ID 的第一个项目触发事件。

将其更改为类并在类选择器上添加点击事件：

@Html.HiddenFor(modelItem => item.Position, new {@class="ps" })
@Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { @class="rd",name="rd"})
<img src="" height="50" width="50" class="picture"/>

在js中：

$(".rd").click(function () {
  var picture = $(this).closest("tr").find('.picture').attr('src', '/Images/vt.png');
  var ps = $(this).closest("tr").find('.ps').val();
  $(picture).show();
});