如何决定什么文本框将做基于单选按钮列表选择-使用JavaScript
本文关键字:单选按钮 列表 选择 JavaScript 使用 何决定 决定 文本 什么 | 更新日期: 2023-09-27 18:17: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();
}