c# - 如何根据 RadioButtonList 选择确定 TextBox 将执行的操作 - 使用 JavaScript

Question

我有一个 RadioButtonList，根据所选内容，我需要一个 TextBox 来执行不同的操作。如果选择第一个 ListItem，我需要 TextBox 只允许输入 4 个数值。如果选择第二个 ListItem，我需要 TextBox 正常工作。我有用于数字和长度验证的函数，我知道这些函数可以工作，但似乎无法弄清楚如何根据所选的函数来实现这些函数。我在下面的代码中包含了数字和长度函数。我遇到的主要问题是确定选择哪个，并根据该选择确定文本框应如何工作。

// Only allows numeric values
function isNumeric(num){
    var charCode = (num.which) ? num.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; }
    else { return true; } 
}

// Validates TextBox Length
function validateTextBoxLength() {
    var tb = document.getElementById("TextBox1").value;
    if (tb.length > 1 && tb.length != 4) {
        alert("TextBox must be 4 digits.");
        return false;
    }
    return true;
}

// Check for RadioButtonList selection
function rbSelectedValue() {
    var radio = document.getElementsByName('<%= rblSearchType.ClientID %>');
    var tb = document.getElementById("TextBox1").value;
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            // alert("RadioButton 1 Selected");
            if (tb.length > 1 && tb.length != 4) {
                alert("TextBox must be 4 digits.");
                return false;
            }
            else {
            return true;
            }
        }
        else {
        // alert("RadioButton 2 Selected");
        return true;
    }
}

<asp:RadioButtonList ID="RadioButtonList" runat="server" AutoPostBack="true" RepeatDirection="Horizontal" onclick="rbSelectedValue()">
    <asp:ListItem Value="List Item 1" Selected="True">Test 1</asp:ListItem>
    <asp:ListItem Value="List Item 2">Test 2</asp:ListItem>
</asp:RadioButtonList>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

任何帮助将不胜感激，并提前感谢您!

Answer 1

您在 RBL 的 HTML 标记中引用的 onclick 事件实际上是服务器端操作。

为了在客户端触发 onclick 事件，您需要将 onclick 事件添加到代码隐藏中的 RBL 属性中:

RadioButtonList.Attributes.Add("onclick", "rbSelectedValue()");

更新

我从未使用过 document.getElementsByName 方法来获取 RBL 数据，因此我无法告诉您这是否导致了问题，但我可以告诉您什么对我们有用。我们使用以下代码成功从RBL中提取当前选定的值，其中参数为RBL的ClientID:

function getRadioListSelectedValue(sName) {
    var theList = document.getElementById(sName);
    var returnVal = ''; //empty string, not null

    if (theList) {
        for (var i = 0; i < theList.childNodes.length; i++) {
            if (theList.childNodes[i].name == sName) {
                if (theList.childNodes[i].checked) {
                    returnVal = theList.childNodes[i].value;
                    break;
                }
            }
        }
    }
    return returnVal;
}

我建议尝试此方法来获取您当前选择的值。