如何根据 RadioButtonList 选择确定 TextBox 将做什么 - 使用 JavaScript

Question

我有一个 RadioButtonList，根据选择的内容，我需要一个 TextBox 来做一些不同的事情。如果选择了第一个 ListItem，我需要 TextBox 只允许输入 4 个数值。如果选择了第二个 ListItem，我需要 TextBox 正常工作。我有用于数字和长度验证的功能，我知道这些功能可以工作，但似乎无法弄清楚如何根据选择的功能来实现这些功能。我在下面的代码中包含了数字和长度函数。我遇到的主要问题是确定选择了哪个以及基于该选择，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;
}

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

Answer 2

Javascript 具有功能特性。您可以非常轻松地使用函数。

// Check for RadioButtonList selection
function rbSelectedValue() {
    var radio = document.getElementsByName('<%= rblSearchType.ClientID %>');
    var validation;
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            switch(n)
            {
               case 1: 
               //do validation 
               validation = function(){
                     validateTextBoxLength();
                     isNumeric(document.getElementById("TextBox1").value);

               }
               break; 
               case 2:
               //do nothing, if textbox
               validation = function(){
               }
               break;
            }
        }
        validation();
}