通过JavaScript获取RadioButtonList选中项时radio.length始终为0求助

我来帮你搞定这个头疼的问题！你遇到的radio.length = 0的情况，根源在于ASP.NET服务器控件的客户端命名机制——你写的服务器端ID rdbGender，在页面渲染成HTML后，客户端的单选框name属性已经被ASP.NET自动修改了（比如变成ctl00$ContentPlaceHolder1$rdbGender这类带容器前缀的名称），所以直接用getElementsByName('rdbGender')自然找不到元素。

下面给你几个可行的解决方案：

方案1：用服务器端UniqueID获取正确的name值 #

这是最可靠的方法，直接在JS代码中嵌入服务器端代码，获取RadioButtonList生成的单选框真实name：

function GetRDBValue() {
    // 用服务器控件的UniqueID获取客户端真实的name属性值
    var radio = document.getElementsByName('<%= rdbGender.UniqueID %>');
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            alert(radio[i].value);
        }
    }
}

方案2：通过控件容器查找单选框 #

先找到RadioButtonList渲染后的容器元素，再从中筛选单选框：

function GetRDBValue() {
    // 获取RadioButtonList的客户端容器
    var rdbContainer = document.getElementById('<%= rdbGender.ClientID %>');
    // 从容器中获取所有input元素
    var radioInputs = rdbContainer.getElementsByTagName('input');
    for (var i = 0; i < radioInputs.length; i++) {
        // 筛选出单选框且被选中的元素
        if (radioInputs[i].type === 'radio' && radioInputs[i].checked) {
            alert(radioInputs[i].value);
        }
    }
}

方案3：设置ClientIDMode为Static（需谨慎） #

如果你确定页面中不会出现重复ID的控件，可以给RadioButtonList添加ClientIDMode="Static"，让它的客户端ID和服务器端ID一致。不过注意：单选框的name属性还是会带前缀，所以这个方案需要配合按ID容器查找的方式使用：

<asp:RadioButtonList ID="rdbGender" runat="server" ClientIDMode="Static">
    <asp:ListItem Text="Male" Value="1"></asp:ListItem>
    <asp:ListItem Text="Female" Value="2"></asp:ListItem>
</asp:RadioButtonList>

之后就可以用document.getElementById('rdbGender')直接找到容器，再按方案2的方式查找单选框。

为什么会出现这个问题？ #

ASP.NET的服务器控件（带runat="server"）会自动生成客户端ID和name，目的是避免页面中出现重复的命名（比如使用母版页、内容占位符时，不同区域的控件不会冲突）。这就导致你写的服务器端ID不会直接作为客户端的name属性，所以原生JS按原名称查找就会失败。

内容的提问来源于stack exchange，提问作者Waleed Naveed