如何决定什么文本框将做基于单选按钮列表选择-使用JavaScript

How to Determine What TextBox Will Do Based on RadioButtonList Selection - Using JavaScript

本文关键字：单选按钮 列表 选择 JavaScript 使用 何决定 决定 文本 什么      更新时间：2023-09-26

我有一个RadioButtonList和基于什么是选择我需要一个文本框做一些不同的东西。如果选择了第一个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>

任何帮助都将非常感激，并提前感谢您!

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

为了在客户端触发onclick事件，您需要将onclick事件添加到codebehind中的RBL属性中: 
RadioButtonList.Attributes.Add("onclick", "rbSelectedValue()");

我从未使用过这个文档。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;
}

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

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();
}
相关文章：