jQuery input[name=“”] selector not working

Question

So this problem has been driving me insane since yesterday afternoon. I've been working on a quote calculator for our site, and I'm trying to style the radio buttons on my form. The quote calculator can be seen here:

http://www.thoughtspacedesigns.com/services/web-services/web-design/web-design-quote-calculator

As you can see, when you click either yes or no on a question, the background changes to an inset orange. These are simply radio buttons with labels attached to them. Here's some sample HTML:

<input type="radio" name="cms" value="yes" id="cms1" /><label for="cms1">Yes</label>
<input type="radio" name="cms" value="no" id="cms2" /><label for="cms2">No</label>

There are multiple "yes / no" radio groups all within the same form. I then put display:none; on the radio button and styled the labels accordingly. Then, when a label is clicked, I use jQuery to add a class to it, like so:

$("label").live('click', function() {
    var thisInput = $(this).prev("input");
    var radioGroup = thisInput.attr("name");
    $(this).addClass("checked");
    $(":radio[name='"+radioGroup+"']").not(thisInput).next("label").removeClass("checked");
}
);

So as you can see, when a radio button's label is clicked, a class of "checked" is added to that label. This class has styles specified in my stylesheet (namely the background coloring). Then, all of the radio buttons with the same name that aren't the one that was clicked should have the "checked" class removed.

This works beautifully in FireFox and Chrome, but the minute I try it in IE8 (or IE7), everything works fine, but it seems that the $(":radio[name='"+radioGroup+"']") selector is not functioning, as the class isn't being removed. Essentially, in IE, my labels don't "de-highlight". I have tried many variations of the selector, using pseudoselectors, filters, and still no luck. Does anybody have some insight into this?

Answer 1

In IE one of your linked scripts adds the following between the <label /> and the <input /> (viewable in developer tools after refreshing the html)

<css3-container style="Z-INDEX: -1; POSITION: absolute; DIRECTION: ltr; TOP: 780px; LEFT: 0px">  
    <background style="POSITION: absolute; TOP: 0px; LEFT: 0px">
        <group1>
            <?xml:namespace prefix = css3vml ns = "urn:schemas-microsoft-com:vml" />
            <css3vml:shape style="POSITION: absolute; WIDTH: 86px; HEIGHT: 42px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "172,84" coordorigin = "1,1" fillcolor = "#ff7955" stroked = "f" path = " m0,16 qy16,0 l156,0 qx172,16 l172,68 qy156,84 l16,84 qx0,68 x e">
                <css3vml:fill></css3vml:fill>
            </css3vml:shape>
        </group1>
    </background>
</css3-container>

This breaks your selector because .prev("input") can't find the input anymore