Question

I was actually able to figure out my problem by assigning IDs to my individual radio buttons and manipulating them that way, but I’m still bothered that I don’t understand why this doesn’t work.

Here’s the deal: let’s say I have two groups of radio buttons that look something like this:

<input type="radio" name="RadioGroup1" id="Group1True" value="True" /> True
<input type="radio" name="RadioGroup1" id="Group1False" value="False" /> False

<input type="radio" name="RadioGroup2" id="Group2True" value="True" /> True
<input type="radio" name="RadioGroup2" id="Group2False" value="False" /> False

I want the RadioGroup2 buttons affected, depending on what is selected in RadioGroup1. For example, if ID=”Group1True” is selected, then I want the RadioGroup2 buttons to be hidden (I have the RadioGroup2 buttons wrapped within a <div> tag to do this).

If, however, ID=”Group1False” is selected, not only do I want the RadioGroup2 buttons to reappear (which works fine), I also want the RadioGroup2 buttons to be reset and unchecked. This is where I run into problems.

I’ve tried all of the following combinations (and even a few more that I can’t remember). None of them do what I want.

if ( $("#RadioGroup1:checked").val() == "False" )
{

// HERE'S where I run into problems:

    // This line not only unchecks the RadioGroup2 buttons, it also unchecks
    // the RadioGroup1 buttons, which I DO NOT want it to do!!!!!!!!!

    $("input:radio[@name=RadioGroup2]").removeAttr("checked");


    // This line gives me a JavaScript error saying:
    // "Object doesn't support this property or method"!!!!!!!

    $("input[@name=RadioGroup2]").removeAttr("checked");


    // This line does absolutely nothing

    $("RadioGroup2").removeAttr("checked");

}

As I said, I was able to resolve my issue by referencing IDs instead of radio group names, but I’m still frustrated that I don’t know why this doesn’t work.

Could someone enlighten me?

Answer 1

Your selector syntax is incorrect.

$('input[name="RadioGroup1"]').whatever();

(Actually I guess it’s not “incorrect” so much as “wrong”; your selectors were looking for a value on the “@name” attribute instead of “name”.)

The # is for “id” values, not “name”, so #RadioGroup1 won’t work for you.

Instead of .removeAttr("checked") you can alternatively set the “checked” property to false:

$('input[name="RadioGroup1"]').prop("checked", false);

You could also give groups of radio buttons a “class” value, which is a little more concise than using the element name:

$('input.radio-group-1')

or whatever. Of course, it’d mean more markup.

Personally I think that’s the better way to go; when you’re messing with the DOM, you should manipulate DOM object properties, not element attributes. Removing the attribute would probably work however.