CODEWITHSUNDEEP
jquery.netradiobuttonlist
User970008
User970008

Reputation: 1155

.Net Jquery Radio Button Toggle Text Area

I have an ASP .Net page with a radio button group and a text area.

I want to toggle the Crime Description textarea, so that if they select "Yes" they must explain the circumstances. Otherwise, the textarea remains hidden for everyone else.

Both are runat server, so the web form master page creates a generated ID for both. However, I cannot seem to get the value of the radio button.

I have tried several of the solutions in other threads, but they have not been working.

Here are several JQ methods I have tried:

//.Net throws an error and says that ClientId is not a property of the radio group.
$('#<%= Crime.ClientId %>').bind('change', function () {

   var checked = $(this).find('input:radio:checked');
   if (checked.length == 0) {
                alert("NO");
            }
   else {
                alert("YES");
            }

   var myRadio = $(this);

                           var checkedValue = myRadio.filter(':checked').val();

                            var show = myRadio.val() == "Yes";

                           var showOrHide = (myRadio.val() == 1) ? true : false;

                            alert(show + " " + showOrHide + " " + checkedValue);
                            $('#<%= CrimeDescription.ClientID %>').toggle(showOrHide);

        });

I've also applied a class to the ASPX control and tried variations on this:

$('.CrimeToggle').click(function () {
                        //maybe traverse down to find the selected???
                    });

.Net ASPX

<asp:RadioButtonList RepeatDirection="Horizontal" CssClass="CrimeToggle" ID="Crime" runat="server">
             <asp:ListItem Value="Yes">Yes</asp:ListItem>
             <asp:ListItem Value="No">No</asp:ListItem>
</asp:RadioButtonList>

<textarea runat="server" id="CrimeDescription"></textarea>

I need to select the selected radio button and get its value.

I must use the RadioButtonList control and not an input (because the backend is doing other things to the control as well).

Here is the output html that .Net generates:

<table id="ctl00_BodyHolder_Crime" class="CrimeToggle" border="0">
<tbody>
<tr>
<td>
<input id="ctl00_BodyHolder_Crime_0" type="radio" value="Yes" name="ctl00$BodyHolder$Crime">
<label for="ctl00_BodyHolder_Crime_0">Yes</label>
</td>
<td>
<input id="ctl00_BodyHolder_Crime_1" type="radio" value="No" name="ctl00$BodyHolder$Crime">
<label for="ctl00_BodyHolder_Crime_1">No</label>
</td>
</tr>
</tbody>
</table>

Upvotes: 0

Views: 846

Answers (2)

User970008
User970008

Reputation: 1155

This is what I ended up with if anyone has the same issue.

$('#<%= Crime.ClientID %>').click(function () {

            var showHide = $('.CrimeToggle').find('input:radio:checked').val() == "Yes";

            $('#<%= CrimeDescription.ClientID %>').toggle(showHide);

});

For some reason, what I had originally started to work again. Visual Studio can be so buggy at times. Strange.

Upvotes: 0

John Fisher
John Fisher

Reputation: 22719

Based on the text you've given us in the question, I believe this advice would be more helpful than directly answering your question.

When using JQuery to find things, it is hunting through the HTML. You have posted .NET ASPX content which is not HTML, but does produce it. Sometimes, ASP.NET does things you don't expect.

So, rather than guessing with your JQuery about what might work, look at the actual HTML output, and use a console in a web browser (several browsers allow this). While looking at the actual HTML, use the console to work out a JQuery expression that pulls up what you need.

Then cheer!

Upvotes: 0

Related Questions