使用javascript / jquery隐藏/显示基于ASP gridview中存在的单选按钮列表值的文本框 [英] Hide/show textbox on based of radio button list value present in ASP gridview.using javascript/jquery
问题描述
Sl .No。问题回复评论
1 Abc是否文本框
2 Xyz是否文本框
3 MNC是否文本框
如上图所示，它是assp.net Gridview，其中Reponse列是redio按钮列表，注释列包含textbox。我需要根据选择响应隐藏/显示文本框。
对于S1号，如果用户选择是，则需要隐藏评论文本框。
For Sl no。 2，如果用户选择否，则需要显示评论文本框。
sl的相似度。 No. 3
所有控件都存在于gridview中。
我需要使用javascript或jquery执行此操作。请帮助，我刚接触asp.net和jquery。
我尝试过：
< asp：GridView ID =gvDatarunat =serverAutoGenerateColumns =FalseEnableModelValidation =True
ShowHeader =trueHeaderStyle-HorizontalAlign =LeftRowStyle-VerticalAlign = Top
CssClass =grdtbl2AlternatingRowStyle-CssClass =altGridLines =NoneCellPadding =4
CellSpacing =0>
< columns> < asp：TemplateField HeaderStyle-Width =2％ItemStyle-HorizontalAlign =Center>
< HeaderTemplate>
S.No.
< / HeaderTemplate>
< itemtemplate>
< asp：Label ID =Label2runat =serverVisible =trueText ='<％＃Bind（q_order）％>'>
< asp：Label ID =lblSaveColrunat =serverVisible =falseText ='< ;％＃Bind（q_save_column）％>'>
< asp：TemplateField HeaderStyle-Width =75 ％>
< HeaderTemplate>
参数
< / HeaderTemplate> ;
< itemtemplate>
< asp：Label ID =Label1runat =serverText ='<％＃Bind（q_text）％ >'>
< asp：TemplateField ItemStyle-HorizontalAlign =Center>
< HeaderTemplate>
< asp：Literal runat =serverID =litResponseHeaderText =>
< table runat =server id =tblResponseHeadercellpadding =0cellspacing =0border =0
class =align =centerwidth =70％>
回应
< / HeaderTemplate>
< itemtemplate>
< asp：RadioButtonList ID =rdResponserunat =serverRepeatDirection = 水平
CellSpacing =0TextAlign =LeftCellPadding =0CssClass =responseRbtnBorderWidth =0
Width =72％ ValidationGroup =XXVisible ='<％＃Convert.ToString（Eval（q_order））==6？ false：true％>'
onclick =Selrdbtn（this.id）>
< asp：ListItem Text =YesValue =1 >
< asp：ListItem Text =NoValue =0>
< asp：Literal runat = serverID =litResponseText =>
< asp：TemplateField ItemStyle-HorizontalAlign =Right >
< HeaderTemplate>
< asp：Literal runat =serverID =litCommentHeaderText =>
< table runat =serverid =tblCommentHeadercellpadding =0cellspacing =0border =0
class = align =centerwidth =70％>
评论
< / HeaderTemplate>
< itemtemplate>
< asp：TextBox ID =txt_ResponseCommentrunat =serverTextMode =MultiLineRows =1
Width = 99％MaxLength =150Visible ='<％＃Convert.ToString（Eval（q_order））==6？ false：true％>'>
< asp：RegularExpressionValidator Display =DynamicControlToValidate =txt_ResponseComment
ID =RegularExpressionValidator1ValidationExpression =^ [ \\\] {0,100} $runat =server
ErrorMessage =允许的最多100个字符。>
< asp：Literal runat =serverID =LtlResponseCommentText =>
< asp：RadioButtonList ID =rdResponseRatingrunat =serverRepeatDirection =Horizontal
CellSpacing =0CellPadding =0CssClass =responseRbtnBorderWidth =0TextAlign =Left
ValidationGroup =XXVisible ='<％＃Convert.ToString（ Eval（q_order））==6？ true：false％>'>
< asp：ListItem Text =1Value =1>
< asp：ListItem Text = 2Value =2>
< asp：ListItem Text =3Value =3>
< asp：ListItem Text = 4Value =4>
< asp：ListItem Text =5Value =5>
< asp：RequiredFieldValidator runat =serverID =rfvControlToValidate =rdResponseRating
ValidationGroup =XXErrorMessage =请选择评级Visible =false>
< asp：Literal runat =serverID =litRatingText =>
以下Javascript函数使用硬编码id值。需要更改。
函数Selrdbtn（id）{
var q1 ='gvData_ctl02_rdResponse';
var q2 ='gvData_ctl03_rdResponse';
var q3 ='gvData_ctl04_rdResponse';
var q4 ='gvData_ctl05_rdResponse';
var q5 ='gvData_ctl06_rdResponse';
var selectedvalue = $（'＃<％= gvData.ClientID％> input：checked'）。val（）
var checked_radio = $（'[id * ='+ id +']输入：选中'）;
var value = checked_radio.val（）;
if（q1 == id）{
if（value == 1）{
$（'＃gvData_ctl02_txt_ResponseComment'）。hide（）; < br $>
}
else {
$（'＃gvData_ctl02_txt_ResponseComment'）。show（）;
}
}
if（q2 == id）{
if（value == 1）{
$（'＃ gvData_ctl03_txt_ResponseComment'）。hide（）;
}
else {
$（'＃gvData_ctl03_txt_ResponseComment'）。show（）;
}
}
if（q3 == id）{
if（value == 1）{
$（'＃gvData_ctl04_txt_ResponseComment'）。show（ ）;
}
else {
$（'＃gvData_ctl04_txt_ResponseComment'）。hide（）;
}
}
if（q4 == id）{
if（value == 1）{
$ （'＃gvData_ctl05_txt_ResponseComment'）。hide（）;
}
else {
$（'＃gvData_ctl05_txt_ResponseComment'）。show（）;
}
}
if（q5 == id）{
if（value == 1）{
$（'＃gvData_ctl06_txt_ResponseComment'）。hide（）;
}
else {
$（' #gvD ata_ctl06_txt_ResponseComment'）。show（）;
}
}
}
Sl .No. Question Response Comment
1 Abc YES NO textbox
2 Xyz YES NO Textbox
3 MNC YES NO textbox
As per above image ,it is assp.net Gridview, in which Reponse column is redio button list and comment column contain textbox. I need to hide/show textbox base on selection response.
For Sl No. 1 , if user select Yes then need to hide comment textbox.
For Sl no. 2 , if user select No then need to show comment textbox.
similarity for sl. No. 3
All control as present within gridview.
I need to do this using javascript or jquery.Please help ,i new to asp.net and jquery.
What I have tried:
<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" EnableModelValidation="True"
ShowHeader="true" HeaderStyle-HorizontalAlign="Left" RowStyle-VerticalAlign="Top"
CssClass="grdtbl2" AlternatingRowStyle-CssClass="alt" GridLines="None" CellPadding="4"
CellSpacing="0">
<columns> <asp:TemplateField HeaderStyle-Width="2%" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
S.No.
</HeaderTemplate>
<itemtemplate>
<asp:Label ID="Label2" runat="server" Visible="true" Text='<%# Bind("q_order") %>'>
<asp:Label ID="lblSaveCol" runat="server" Visible="false" Text='<%# Bind("q_save_column") %>'>
<asp:TemplateField HeaderStyle-Width="75%">
<HeaderTemplate>
Parameter
</HeaderTemplate>
<itemtemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("q_text") %>'>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:Literal runat="server" ID="litResponseHeader" Text="">
<table runat="server" id="tblResponseHeader" cellpadding="0" cellspacing="0" border="0"
class="" align="center" width="70%">
RESPONSE
</HeaderTemplate>
<itemtemplate>
<asp:RadioButtonList ID="rdResponse" runat="server" RepeatDirection="Horizontal"
CellSpacing="0" TextAlign="Left" CellPadding="0" CssClass="responseRbtn" BorderWidth="0"
Width="72%" ValidationGroup="XX" Visible='<%# Convert.ToString(Eval("q_order")) == "6" ? false:true %>'
onclick="Selrdbtn(this.id)">
<asp:ListItem Text="Yes" Value="1">
<asp:ListItem Text="No" Value="0">
<asp:Literal runat="server" ID="litResponse" Text="">
<asp:TemplateField ItemStyle-HorizontalAlign="Right">
<HeaderTemplate>
<asp:Literal runat="server" ID="litCommentHeader" Text="">
<table runat="server" id="tblCommentHeader" cellpadding="0" cellspacing="0" border="0"
class="" align="center" width="70%">
COMMENT
</HeaderTemplate>
<itemtemplate>
<asp:TextBox ID="txt_ResponseComment" runat="server" TextMode="MultiLine" Rows="1"
Width="99%" MaxLength="150" Visible='<%# Convert.ToString(Eval("q_order")) == "6" ? false:true %>'>
<asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txt_ResponseComment"
ID="RegularExpressionValidator1" ValidationExpression="^[\s\S]{0,100}$" runat="server"
ErrorMessage="Maximum 100 characters allowed.">
<asp:Literal runat="server" ID="LtlResponseComment" Text="">
<asp:RadioButtonList ID="rdResponseRating" runat="server" RepeatDirection="Horizontal"
CellSpacing="0" CellPadding="0" CssClass="responseRbtn" BorderWidth="0" TextAlign="Left"
ValidationGroup="XX" Visible='<%# Convert.ToString(Eval("q_order")) == "6" ? true : false %>'>
<asp:ListItem Text="1" Value="1">
<asp:ListItem Text="2" Value="2">
<asp:ListItem Text="3" Value="3">
<asp:ListItem Text="4" Value="4">
<asp:ListItem Text="5" Value="5">
<asp:RequiredFieldValidator runat="server" ID="rfv" ControlToValidate="rdResponseRating"
ValidationGroup="XX" ErrorMessage="Please select a rating" Visible="false">
<asp:Literal runat="server" ID="litRating" Text="">
Below Javascript function use hardcode id value. need to be change.
function Selrdbtn(id) {
var q1 = 'gvData_ctl02_rdResponse';
var q2 = 'gvData_ctl03_rdResponse';
var q3 = 'gvData_ctl04_rdResponse';
var q4 = 'gvData_ctl05_rdResponse';
var q5 = 'gvData_ctl06_rdResponse';
var selectedvalue = $('#<%= gvData.ClientID %> input:checked').val()
var checked_radio = $('[id*=' + id + '] input:checked');
var value = checked_radio.val();
if (q1 == id) {
if (value == 1) {
$('#gvData_ctl02_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl02_txt_ResponseComment').show();
}
}
if (q2 == id) {
if (value == 1) {
$('#gvData_ctl03_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl03_txt_ResponseComment').show();
}
}
if (q3 == id) {
if (value == 1) {
$('#gvData_ctl04_txt_ResponseComment').show();
}
else {
$('#gvData_ctl04_txt_ResponseComment').hide();
}
}
if (q4 == id) {
if (value == 1) {
$('#gvData_ctl05_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl05_txt_ResponseComment').show();
}
}
if (q5 == id) {
if (value == 1) {
$('#gvData_ctl06_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl06_txt_ResponseComment').show();
}
}
}
推荐答案
runat =server
ErrorMessage =允许的最多100个字符。>
< asp：Literal runat = serverID =LtlResponseCommentText =>
< asp：RadioButtonList ID =rdResponseRatingrunat =serverRepeatDirection =Horizontal
CellSpacing =0CellPadding =0CssClass =responseRbtnBorderWidth =0TextAlign =Left
ValidationGroup =XXVisible ='<％＃Convert.ToString（Eval （q_order））==6？ true：false％>'>
< asp：ListItem Text =1Value =1>
< asp：ListItem Text = 2Value =2>
< asp：ListItem Text =3Value =3>
< asp：ListItem Text = 4Value =4>
< asp：ListItem Text =5Value =5>
< asp：RequiredFieldValidator runat =serverID =rfvControlToValidate =rdResponseRating
ValidationGroup =XXErrorMessage =请选择评级Visible =false>
< asp：Literal runat =serverID =litRatingText =>
以下Javascript函数使用硬编码id值。需要更改。
函数Selrdbtn（id）{
var q1 ='gvData_ctl02_rdResponse';
var q2 ='gvData_ctl03_rdResponse';
var q3 ='gvData_ctl04_rdResponse';
var q4 ='gvData_ctl05_rdResponse';
var q5 ='gvData_ctl06_rdResponse';
var selectedvalue =
" runat="server"
ErrorMessage="Maximum 100 characters allowed.">
<asp:Literal runat="server" ID="LtlResponseComment" Text="">
<asp:RadioButtonList ID="rdResponseRating" runat="server" RepeatDirection="Horizontal"
CellSpacing="0" CellPadding="0" CssClass="responseRbtn" BorderWidth="0" TextAlign="Left"
ValidationGroup="XX" Visible='<%# Convert.ToString(Eval("q_order")) == "6" ? true : false %>'>
<asp:ListItem Text="1" Value="1">
<asp:ListItem Text="2" Value="2">
<asp:ListItem Text="3" Value="3">
<asp:ListItem Text="4" Value="4">
<asp:ListItem Text="5" Value="5">
<asp:RequiredFieldValidator runat="server" ID="rfv" ControlToValidate="rdResponseRating"
ValidationGroup="XX" ErrorMessage="Please select a rating" Visible="false">
<asp:Literal runat="server" ID="litRating" Text="">
Below Javascript function use hardcode id value. need to be change.
function Selrdbtn(id) {
var q1 = 'gvData_ctl02_rdResponse';
var q2 = 'gvData_ctl03_rdResponse';
var q3 = 'gvData_ctl04_rdResponse';
var q4 = 'gvData_ctl05_rdResponse';
var q5 = 'gvData_ctl06_rdResponse';
var selectedvalue =
（'＃<％= gvData.ClientID％> input：checked'）。val（）
var checked_radio =
('#<%= gvData.ClientID %> input:checked').val()
var checked_radio =
（'[id * ='+ id +'] input：checked'）;
var value = checked_radio.val（） ;
if（q1 == id）{
if（value == 1）{
('[id*=' + id + '] input:checked');
var value = checked_radio.val();
if (q1 == id) {
if (value == 1) {
这篇关于使用javascript / jquery隐藏/显示基于ASP gridview中存在的单选按钮列表值的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
