javascript - 读取单选按钮列表的值

Question

我有具有相同 ID 的单选按钮列表。我正在尝试读取每个单选按钮的值，但我的代码始终只读取第一个单选按钮的值。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#rdodoc").click(function () {
            var val = $("[id=rdodoc]").val()
            alert(val);
        });


    });
</script>


@foreach (ReadWord.Models.Document item in ViewBag.lstdocs)
{
    @Html.RadioButton("rdodoc", item.Name)
    <label>@item.Name</label>


}

Answer 1

而不是iduse class="rdodoc"，这是正确的做法。

$(document).ready(function () {
    $(".rdodoc").click(function () {
        var val = $(this).val()
        alert(val);
    });
});

使用上面的代码，当你点击一个单选按钮时，它的值会被提醒

Answer 2

具有相同 id 的许多元素是无效的 html。此外，您的选择器只会将点击事件绑定到一个元素。改用一个类，如下所示：

<script>
    $(document).ready(function () {
        $(".rdodoc").click(function () {
            var values = $('.rdodoc').map(function(e) { return $(this).val(); });
            $.each(values, function(e, v) { alert(v); });
        });
    });
</script>

@foreach (ReadWord.Models.Document item in ViewBag.lstdocs)
{
    @Html.RadioButton("rdodoc", item.Name, new { @class = "rdodoc" })
    <label>@item.Name</label>
}

Answer 3

元素的 ID 应该是唯一的。重复的 ID 将使您的 html 文档无效，并且通过 ID 访问这些元素只会返回第一个找到的元素。如果要对单选按钮进行分组，请使用 name 属性来执行此操作。为了获得这些值，您可以使用它们的唯一 ID 进行迭代。

Answer 4

您还需要在您的 javascript 中运行一个循环。现在你只得到 1 个值，这就是你看到第一个值的原因。并将 id 更改为 name 或 class。

$( ".rdodc" ).each(function( index ) {
  alert( index + ": " + $( this ).val() );
});

这将提醒每个单选按钮值。