Reputation: 1183
Can someone help with the JQuery syntax to perform an action when a radio button list option is selected? I have a radio button list with two options. I would like to hide a div when one value is selected and display the div when the other value is selected.
This is working fine but when the value comes from code behind. Its remain the same or it does not work.
Here is my Asp.net page code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div>
<asp:Label ID="Label1" runat="server" Text="Types of Loan: " />
<asp:RadioButtonList ID="radLoan" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" ClientIDMode="Static">
<asp:ListItem Value="Car">Car Loan</asp:ListItem>
<asp:ListItem Value="House">House Loan</asp:ListItem>
<asp:ListItem Value="Others">Others</asp:ListItem>
</asp:RadioButtonList>
<br />
<br />
<div id="divOther">
<asp:Label ID="Label2" runat="server" Text="Others: " />
<asp:TextBox ID="txtOthers" runat="server" />
</div>
</div>
Here is the Jquery script...
$(document).ready(function () {
var radioChecked;
$('#<%=radLoan.ClientID%>').change(function () {
radioChecked = $("input[type='radio']:checked").val()
if (radioChecked == "Others") {
$('#divOther').show();
} else {
$('#divOther').hide();
}
});
});
Is there any option to avoid to add click/change event in the backend?
radLoan.Attributes.Add("OnClick", "return radLoan_onClick(this)");
Upvotes: 1
Views: 1147
Reputation: 1509
Like this may be
$(document).ready(function () {
var radioChecked;
radioChecked = $("#<%=radLoan.ClientID%> input:checked").val();
if (radioChecked == "Others") {
$('#divOther').show();
} else {
$('#divOther').hide();
}
$('#<%=radLoan.ClientID%>').change(function () {
radioChecked = $("input[type='radio']:checked").val()
if (radioChecked == "Others") {
$('#divOther').show();
} else {
$('#divOther').hide();
}
});
});
Upvotes: 1