读取单选按钮列表的值

Read values of radiobutton list

本文关键字：列表 单选按钮 读取      更新时间：2023-09-26

我有具有相同 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>

}

而不是id使用class="rdodoc"，这是正确的方法。

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

使用上面的代码，当您单击单选按钮时，它的值将被提醒

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

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

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

你还需要在你的JavaScript中运行一个循环。现在你只得到 1 个值，这就是你看到第一个值的原因。，然后将 ID 更改为名称或类。

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

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

相关文章：