I've got code similar to the following...
<p><label>Do you have buffet facilities?</label>
<asp:RadioButtonList ID="blnBuffetMealFacilities:chk" runat="server">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:RadioButtonList></p>
<div id="HasBuffet">
<p><label>What is the capacity for the buffet?</label>
<asp:RadioButtonList ID="radBuffetCapacity" runat="server">
<asp:ListItem Text="Suitable for upto 30 guests" value="0 to 30"></asp:ListItem>
<asp:ListItem Text="Suitable for upto 50 guests" value="30 to 50"></asp:ListItem>
<asp:ListItem Text="Suitable for upto 75 guests" value="50 to 75"></asp:ListItem>
<asp:ListItem Text="Suitable for upto 100 guests" value="75 to 100"></asp:ListItem>
<asp:ListItem Text="Suitable for upto 150 guests" value="100 to 150"></asp:ListItem>
<asp:ListItem Text="Suitable for upto 250 guests" value="150 to 250"></asp:ListItem>
<asp:ListItem Text="Suitable for upto 400 guests" value="250 to 400"></asp:ListItem>
</asp:RadioButtonList></p>
</div>
I want to capture an event when the radio list blBuffetMealFacilities:chk changes client side and perform a slide down function on the HasBuffet div from jQuery. What's the best way to create this, bearing in mind there are several similar sections on the page, where I want questions to be revealed depending on a yes no answer in a radio list.
This question is related to
jquery
asp.net
event-handling
radio-button
According to me it'll be working fine...
Just try with this
var GetValue=$('#radiobuttonListId').find(":checked").val();
The Radiobuttonlist value to be stored on GetValue(Variable).
For my scenario, my JS was in a separate file, so using a ClientID response output wasn't conducive. Surprisingly, the solution was as simple as adding a CssClass to the RadioButtonList, which I found out on DevCurry
Just incase that solution disappears, add a class to your radio button list
<asp:RadioButtonList id="rbl" runat="server" class="tbl">...
As the article points out, when the radio button list is rendered, the class "tbl" is appended to the surrounding table
<table id="rbl" class="tbl" border="0">
<tr>...
Now because of the CSS class that has been appended, you can just refer to input:radio items within your table, based on the css class selector
$(function () {
var $radBtn = $("table.tbl input:radio");
$radBtn.click(function () {
var $radChecked = $(':radio:checked');
alert($radChecked.val());
});
});
Again, this avoids using the "ClientID" mentioned above which I found messy for my scenario. Hope this helps!
The simple way to retrieve checked value of RadioButtonList1 is:
$('#RadioButtonList1 input:checked').val()
Edit by Tim:
where RadioButtonList1 must be the ClientID of the RadioButtonList
var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked");
I voted for Vinh's answer to get the value.
If you need to find the corresponding label, you can use this code:
$('#ClientID' + ' input:checked').parent().find('label').text()
This worked for me...
<asp:RadioButtonList runat="server" ID="Intent">
<asp:ListItem Value="Confirm">Yes!</asp:ListItem>
<asp:ListItem Value="Postpone">Not now</asp:ListItem>
<asp:ListItem Value="Decline">Never!</asp:ListItem>
</asp:RadioButtonList>
The handler:
$(document).ready(function () {
$("#<%=Intent.ClientID%>").change(function(){
var rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();
if(rbvalue == "Confirm"){
alert("Woohoo, Thanks!");
} else if (rbvalue == "Postpone"){
alert("Well, I really hope it's soon");
} else if (rbvalue == "Decline"){
alert("Shucks!");
} else {
alert("How'd you get here? Who sent you?");
}
});
});
The important part: $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();
following is the code we eventually created. A breif explanation first. We used a "q_" for the div name wrapped around the radio button question list. Then we had "s_" for any sections. The following code loops through the questions to find the checked value, and then performs a slide action on the relevant section.
var shows_6 = function() {
var selected = $("#q_7 input:radio:checked").val();
if (selected == 'Groom') {
$("#s_6").slideDown();
} else {
$("#s_6").slideUp();
}
};
$('#q_7 input').ready(shows_6);
var shows_7 = function() {
var selected = $("#q_7 input:radio:checked").val();
if (selected == 'Bride') {
$("#s_7").slideDown();
} else {
$("#s_7").slideUp();
}
};
$('#q_7 input').ready(shows_7);
$(document).ready(function() {
$('#q_7 input:radio').click(shows_6);
$('#q_7 input:radio').click(shows_7);
});
<div id="q_7" class='question '><label>Who are you?</label>
<p>
<label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0">Bride</label>
<input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" />
</p>
<p>
<label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1">Groom</label>
<input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" />
</p>
</div>
The following allows us to make the question mandatory...
<script type="text/javascript">
var mandatory_q_7 = function() {
var selected = $("#q_7 input:radio:checked").val();
if (selected != '') {
$("#q_7").removeClass('error');
}
};
$(document).ready(function() {
$('#q_7 input:radio').click(function(){mandatory_q_7();});
});
</script>
Here's an example of the actual show / hide layer
<div class="section" id="s_6">
<h2>Attire</h2>
...
</div>
Try this:
$("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val()
For my scenario, my JS was in a separate file, so using a ClientID response output wasn't conducive. Surprisingly, the solution was as simple as adding a CssClass to the RadioButtonList, which I found out on DevCurry
Just incase that solution disappears, add a class to your radio button list
<asp:RadioButtonList id="rbl" runat="server" class="tbl">...
As the article points out, when the radio button list is rendered, the class "tbl" is appended to the surrounding table
<table id="rbl" class="tbl" border="0">
<tr>...
Now because of the CSS class that has been appended, you can just refer to input:radio items within your table, based on the css class selector
$(function () {
var $radBtn = $("table.tbl input:radio");
$radBtn.click(function () {
var $radChecked = $(':radio:checked');
alert($radChecked.val());
});
});
Again, this avoids using the "ClientID" mentioned above which I found messy for my scenario. Hope this helps!
A Radio Button List instead of a Radio button creates unique id tags name_0, name_1 etc. An easy way to test which is selected is by assigning a css class like
var deliveryService;
$('.deliveryservice input').each(function () {
if (this.checked) {
deliveryService = this.value
}
Try the below code:
<script type="text/javascript">
$(document).ready(function () {
$(".ratingButtons").buttonset();
});
</script>
<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" runat="server"
AutoPostBack="True" DataSourceID="SqlDataSourceSizes" DataTextField="ProdSize"
CssClass="ratingButtons" DataValueField="_ProdSizeID" Font-Size="X-Small"
ForeColor="#666666">
</asp:RadioButtonList>
Try this:
$("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val()
I found a simple solution, try this:
var Ocasiao = "";
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });
A Radio Button List instead of a Radio button creates unique id tags name_0, name_1 etc. An easy way to test which is selected is by assigning a css class like
var deliveryService;
$('.deliveryservice input').each(function () {
if (this.checked) {
deliveryService = this.value
}
This worked for me...
<asp:RadioButtonList runat="server" ID="Intent">
<asp:ListItem Value="Confirm">Yes!</asp:ListItem>
<asp:ListItem Value="Postpone">Not now</asp:ListItem>
<asp:ListItem Value="Decline">Never!</asp:ListItem>
</asp:RadioButtonList>
The handler:
$(document).ready(function () {
$("#<%=Intent.ClientID%>").change(function(){
var rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();
if(rbvalue == "Confirm"){
alert("Woohoo, Thanks!");
} else if (rbvalue == "Postpone"){
alert("Well, I really hope it's soon");
} else if (rbvalue == "Decline"){
alert("Shucks!");
} else {
alert("How'd you get here? Who sent you?");
}
});
});
The important part: $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();
Why so complex?
$('#id:checked').val();
Will work just fine!
I found a simple solution, try this:
var Ocasiao = "";
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });
The simple way to retrieve checked value of RadioButtonList1 is:
$('#RadioButtonList1 input:checked').val()
Edit by Tim:
where RadioButtonList1 must be the ClientID of the RadioButtonList
var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked");
Andrew Bullock solution works just fine, I just wanted to show you mine and add a warning.
//Works great
$('#<%= radBuffetCapacity.ClientID %> input').click(function (e) {
var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
//Do whatever
});
//Warning - works in firefox but not IE8 .. used this for some time before a noticing that it didnt work in IE8... used to everything working in all browsers with jQuery when working in one.
$('#<%= radBuffetCapacity.ClientID %>').change(function (e) {
var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
//Do whatever
});
Why so complex?
$('#id:checked').val();
Will work just fine!
Try the below code:
<script type="text/javascript">
$(document).ready(function () {
$(".ratingButtons").buttonset();
});
</script>
<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" runat="server"
AutoPostBack="True" DataSourceID="SqlDataSourceSizes" DataTextField="ProdSize"
CssClass="ratingButtons" DataValueField="_ProdSizeID" Font-Size="X-Small"
ForeColor="#666666">
</asp:RadioButtonList>
According to me it'll be working fine...
Just try with this
var GetValue=$('#radiobuttonListId').find(":checked").val();
The Radiobuttonlist value to be stored on GetValue(Variable).
I voted for Vinh's answer to get the value.
If you need to find the corresponding label, you can use this code:
$('#ClientID' + ' input:checked').parent().find('label').text()
Andrew Bullock solution works just fine, I just wanted to show you mine and add a warning.
//Works great
$('#<%= radBuffetCapacity.ClientID %> input').click(function (e) {
var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
//Do whatever
});
//Warning - works in firefox but not IE8 .. used this for some time before a noticing that it didnt work in IE8... used to everything working in all browsers with jQuery when working in one.
$('#<%= radBuffetCapacity.ClientID %>').change(function (e) {
var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
//Do whatever
});
following is the code we eventually created. A breif explanation first. We used a "q_" for the div name wrapped around the radio button question list. Then we had "s_" for any sections. The following code loops through the questions to find the checked value, and then performs a slide action on the relevant section.
var shows_6 = function() {
var selected = $("#q_7 input:radio:checked").val();
if (selected == 'Groom') {
$("#s_6").slideDown();
} else {
$("#s_6").slideUp();
}
};
$('#q_7 input').ready(shows_6);
var shows_7 = function() {
var selected = $("#q_7 input:radio:checked").val();
if (selected == 'Bride') {
$("#s_7").slideDown();
} else {
$("#s_7").slideUp();
}
};
$('#q_7 input').ready(shows_7);
$(document).ready(function() {
$('#q_7 input:radio').click(shows_6);
$('#q_7 input:radio').click(shows_7);
});
<div id="q_7" class='question '><label>Who are you?</label>
<p>
<label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0">Bride</label>
<input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" />
</p>
<p>
<label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1">Groom</label>
<input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" />
</p>
</div>
The following allows us to make the question mandatory...
<script type="text/javascript">
var mandatory_q_7 = function() {
var selected = $("#q_7 input:radio:checked").val();
if (selected != '') {
$("#q_7").removeClass('error');
}
};
$(document).ready(function() {
$('#q_7 input:radio').click(function(){mandatory_q_7();});
});
</script>
Here's an example of the actual show / hide layer
<div class="section" id="s_6">
<h2>Attire</h2>
...
</div>
Source: Stackoverflow.com