如何確定基於RadioButtonList選擇的文本框將做什麼 - 使用JavaScript

Question

我有一個RadioButtonList和基於選擇什麼，我需要一個文本框來做不同的事情。如果選擇了第一個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()"); 

更新

我從來沒有使用過的文檔.getElementsByName方法來獲取RBL數據，所以我不能告訴你這是否導致問題，但我可以告訴你什麼對我們有用。我們用下面的代碼能夠成功提取從RBL，其中參數是RBL的客戶端ID當前所選的值：

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(); 
}