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.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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");
Method 2
this:
$('#rblDiv input').click(function(){
alert($('#rblDiv input').index(this));
});
will get you the index of the radio button that was clicked (i think, untested) (note you’ve had to wrap your RBL in #rblDiv
you could then use that to display the corresponding div like this:
$('.divCollection div:eq(' + $('#rblDiv input').index(this) +')').show();
Is that what you meant?
Edit: Another approach would be to give the rbl a class name, then go:
$('.rblClass').val();
Method 3
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();
Method 4
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).
Method 5
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
}
Method 6
Try this:
$("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val()
Method 7
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>
Method 8
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>
Method 9
Why so complex?
$('#id:checked').val();
Will work just fine!
Method 10
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
});
Method 11
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()
Method 12
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!
Method 13
I found a simple solution, try this:
var Ocasiao = "";
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0