Check whether specific radio button is checked

Question

I'm having trouble after looking at the jQuery docs. I'm just trying to return true/false in one my my jquery methods depending on the check of a certain radiobutton and if it's selected or not

I've tried several things but have not been able to get this right:

<input type="radio" runat="server" name="testGroup" id="test1" /><label for="<%=test1.ClientID %>" style="cursor:hand" runat="server">Test1</label>
<input type="radio" runat="server" name="testGroup" id="test2" /><label for="<%=test2.ClientID %>" style="cursor:hand" runat="server">Test2</label>
<input type="radio" runat="server" name="testGroup" id="test3" /> <label for="<%=test3.ClientID %>" style="cursor:hand">Test3</label>

and in my method I have this:

return $("input[@name='test2']:checked");

I'm getting an undefined on $("input[@name='test2']:checked");

UPDATED:

example:

<input type="radio" runat="server" name="radioGroup"  id="payPalRadioButton" value="paypalSelected" /> 

this returns 'undefined' still:

$("input[@name=radioGroup]:checked").attr('payPalRadioButton'); 

If I try this, I get 'false' even if I select the radio button:

$('input:radio[name=radioGroup]:checked').val() == 'paypalSelected'

Packaging

Answer 1

Your selector won't select the input field, and if it did it would return a jQuery object. Try this:

$('#test2').is(':checked'); 

Kyleekylen

it's returning false every time even though I select lets say test2 – Packaging

Dear God .NET forgot about the unique random clientID it creates for ID. – Packaging

Answer 2

I think you're using the wrong approach. You should set the value attribute of your input elements. Check the docs for .val() for examples of setting and returning the .val() of input elements.

ie.

<input type="radio" runat="server" name="testGroup" value="test2" />

return $('input:radio[name=testGroup]:checked').val() == 'test2';

Sane

well I can't go and change all that now. That would require a lot of refactoring on our current page. – Packaging

regex for the win! Just replace your ids with values. Point is, input elements (especially check boxes and radio buttons) should have a value. More info: w3.org/TR/html401/interact/forms.html#h-17.4 – Sane

$('input:radio[name=bar]:checked').val(); so we don't have value in there I suppose that defaults then to 0,1, and 2 respectively – Packaging

That may be, but I'm not sure you can rely on it. See the w3.org documents I linked -- value is optional except when the type attribute has the value "radio" or "checkbox". – Sane

I still get false per your example when I select the button – Packaging

Answer 3

1.You don't need the @ prefix for attribute names any more:

http://api.jquery.com/category/selectors/attribute-selectors/:

Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the ‘@’ symbol from your selectors in order to make them work again.

2.Your selector queries radio buttons by name, but that attribute is not defined in your HTML structure.

Tut

well name would be the same for all 3 radiobuttons since it's a group in this case. – Packaging

exactly, it IS the same, but you still need it there – Tut

I have name...so not sure what the problem is?? :( – Packaging

the problem is name='test2' -- the name of your radio group is actually testGroup – Sane

Answer 4

You should remove the '@' before 'name'; it's not needed anymore (for current jQuery versions).

You're want to return all checked elements with name 'test2', but you don't have any elements with that name, you're using an id of 'test2'.

If you're going to use IDs, just try:

return $('#test2').attr('checked');

Prestonprestress

I'm still getting an undefined..it doesn't know what #test2 is. – Packaging

Answer 5

WHy bother with all of the fancy selectors? If you're using those id="" attributes properly, then 'test2' must be the only tag with that id on the page, then the .checked boolean property will tell you if it's checked or not:

if ($('test2').checked) {
    ....
}

You've also not set any values for those radio buttons, so no matter which button you select, you'll just get a blank "testGroup=" submitted to the server.

Warrant

Answer 6

$("input[@name='<%=test2.ClientID%>']:checked");

use this and here ClientID fetch random id created by .net.

Halidom

Question is asked before 6 years..and s/he also get answer..you can't say use this – Discrepant

Answer 7

Just found a proper working solution for other guys,

// Returns true or false based on the radio button checked
$('#test1').prop('checked')


$('body').on('change','input[type="radio"]',function () {
alert('Test1 checked = ' + $('#test1').prop('checked') + '. Test2 checked = ' + $('#test2').prop('checked') + '. Test3 checked = ' + $('#test3').prop('checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" runat="server" name="testGroup" id="test1" /><label for="<%=test1.ClientID %>" style="cursor:hand" runat="server">Test1</label>

<input type="radio" runat="server" name="testGroup" id="test2" /><label for="<%=test2.ClientID %>" style="cursor:hand" runat="server">Test2</label>

<input type="radio" runat="server" name="testGroup" id="test3" /> <label for="<%=test3.ClientID %>" style="cursor:hand">Test3</label>

and in your method you can use like

return $('#test2').prop('checked');

Gangrene