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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

读取radiobutton列表的值

4 个答案: