动态隐藏基于单选按钮选中状态的文本框
本文关键字:状态 文本 隐藏 单选按钮 动态 | 更新日期: 2023-09-27 18:06:12
我在aspx页面上有一组带有相应文本框的单选按钮。我希望文本框显示或隐藏取决于他们的相对单选按钮选中状态。
在页面加载期间,我拉面板上的所有控件,通过每个循环,如果它的类型是单选按钮,我添加javascript函数到单选按钮运行onchange。根据单选复选状态,该函数将显示或隐藏文本框。我不确定如何告诉函数哪个文本框隐藏基于单选按钮,而不是为单选按钮做我自己的属性,并在page_load中使用。对我来说,这是我想到的最好的解决方案,除了内联JS函数调用之外。
但即使这样也没用。
不管我的代码的功能如何,这不是我想要的。我想从面板中获得单选按钮的列表或数组(而不是抓取所有控件),并向其添加功能。向单选按钮添加属性似乎不是最干净的方式,内联所有调用也不是。不管选择的解决方案路径是什么,我仍然需要知道与单选按钮一起隐藏或显示的文本框。因此,任何帮助、想法和智慧,我们都将感激不尽。 HTML:<div id="divPersonnel" style="margin-right: auto; margin-left: auto; width: 95%;
display: block; vertical-align: middle;">
<asp:Panel ID="pnlPersonnel" runat="server">
<div style="width: 300px; margin-right: auto; margin-left: auto;">
<asp:Table runat="server" BorderStyle="None" ID="tblPersonnelQuerySelect">
<asp:TableRow VerticalAlign="Middle">
<asp:TableCell>
<asp:RadioButton ID="rdbID" runat="server" textbox="txbID"/>
</asp:TableCell>
<asp:TableCell>
<asp:Label class="left" ID="lblID" runat="server" Text="ID:" Style=""></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox class="right" ID="txbID" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow VerticalAlign="Middle">
<asp:TableCell>
<asp:RadioButton ID="rdbFN" runat="server" textbox="txbFN"/>
</asp:TableCell>
<asp:TableCell>
<asp:Label class="left" ID="lblFname" runat="server" Text="First Name:" Style=""></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox class="right" ID="txbFN" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow VerticalAlign="Middle">
<asp:TableCell>
<asp:RadioButton ID="rdbLN" runat="server" textbox="txbLN"/>
</asp:TableCell>
<asp:TableCell>
<asp:Label class="left" ID="lblLName" runat="server" Text="Last Name:" Style=""></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox class="right" ID="txbLN" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow VerticalAlign="Middle">
<asp:TableCell>
<asp:RadioButton ID="rdbPR" runat="server" textbox="txbPR"/>
</asp:TableCell>
<asp:TableCell>
<asp:Label class="left" ID="lblRate" runat="server" Text="Pay Rate:" Style=""></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox class="right" ID="txbPR" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow VerticalAlign="Middle">
<asp:TableCell>
<asp:RadioButton ID="rdbSD" runat="server" textbox="dtpkrSD"/><br />
<asp:RadioButton ID="rdbED" runat="server" textbox="dtpkrED"/>
</asp:TableCell>
<asp:TableCell>
<asp:Label class="left" ID="lblStartDate" runat="server" Text="Start Date:" Style=""></asp:Label>
<br />
<asp:Label class="left" ID="lblEndDate" runat="server" Text="End Date:" Style=""></asp:Label>
</asp:TableCell>
<asp:TableCell>
<input class="right" id="dtpkrSD" onclick="$(this).datepicker();"/><br />
<input class="right" id="dtpkrED" onclick="$(this).datepicker();"/>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</asp:Panel>
</div>
Javascript: function toggletxb(rdb, txb) {
if ($(rdb).attr('checked') == true) {
$(txb).show();
}
else { $(txb).hide(); }
}
c#(运行于Page_Load):
Control[] ctrsPersonnel = new Control[pnlPersonnel.Controls.Count];
pnlPersonnel.Controls.CopyTo(ctrsPersonnel, 0);
foreach (Control _ctr in ctrsPersonnel)
{
if (_ctr.GetType() == typeof(RadioButton))
{
((RadioButton)_ctr).Attributes.Add("onclick", "toggleCheckedState($(this));toggletxb($(this), $(#" + ((RadioButton)_ctr).["textbox"] + ");");
continue;
}
else if (_ctr.GetType() == typeof(TextBox))
{
((TextBox)_ctr).Attributes.Add("onload", "$(this).hide();");
continue;
}
else
{
continue;
}
}
######编辑############我最终使用数组中的元素id并循环遍历每个索引以添加属性'onclick'和该属性的函数。
html保持不变,c#已被删除。
//checkbox ids
var checks = ['<%= chbID.ClientID%>', '<%= chbFN.ClientID%>', '<%= chbLN.ClientID%>', '<%= chbPR.ClientID%>', '<%= chbDtPkrSD.ClientID%>', '<%= chbDtPkrED.ClientID%>',
'<%= chbUID.ClientID%>', '<%= chbUsername.ClientID%>', '<%= chbActivityID.ClientID%>', '<%= chbIP.ClientID %>', '<%= chbFormAccessed.ClientID %>', '<%= chbDOA.ClientID %>'];
// text box ids
var texts = ['<%= txbID.ClientID%>', '<%= txbFN.ClientID%>', '<%= txbLN.ClientID%>', '<%= txbPR.ClientID%>', 'txbDtPkrSD', 'txbDtPkrED',
'<%= txbUID.ClientID%>', '<%= txbUsername.ClientID%>', '<%= txbActivityID.ClientID%>', '<%= txbIP.ClientID %>', '<%= txbFormAccessed.ClientID %>', 'dtpkrDOA'];
//loop through each id and add the functions
for (var i = 0; i < checks.length; i++) {
$('#' + checks[i]).attr('onclick', 'toggletxb($(this),$("#' + texts[i] + '"))');
$('#' + texts[i]).hide();
}
###### END EDIT
因为你的单选按钮和文本框不是动态生成的,换句话说,它们是硬编码在html中,那么我建议你使用客户端代码。尝试使用input type="radio"代替asp单选按钮。添加onclick = yourfunction(this);注意这里没有$符号。
一旦onclick事件被触发,那么您可以使用clientId而不是服务器id来查找文本框。
的例子:var mytextbox = $ get (" & lt; % = Textbox1.ClientID %> ");
希望对大家有所帮助