Question

所以自昨天下午以来，这个问题一直让我感到疯狂。我一直在为我们的网站制作一个报价计算器，我正在尝试在我的表单上设置单选按钮的样式。报价计算器可以在这里看到：

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

正如您所看到的，当您在问题上单击是或否时，背景将变为插入橙色。这些只是带有标签的单选按钮。这是一些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>

在同一表格中有多个“是/否”广播组。然后我把display：none;在单选按钮上并相应地设置标签样式。然后，当单击一个标签时，我使用jQuery为它添加一个类，如下所示：

$("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");
}
);

正如您所看到的，当单击单选按钮的标签时，会向该标签添加一类“已检查”。此类具有样式表中指定的样式（即背景着色）。然后，所有与所点击的名称不同的单选按钮都应该删除“已检查”类。

这在FireFox和Chrome中运行得非常好，但是当我在IE8（或IE7）中尝试它时，一切正常，但似乎$(":radio[name='"+radioGroup+"']")选择器无法正常运行，因为类不是除去。基本上，在IE中，我的标签不会“去突出显示”。我已经尝试了选择器的许多变体，使用伪选择器，过滤器，但仍然没有运气。有没有人对此有所了解？

Answer 1

在IE中，您的一个链接脚本在<label />和<input />之间添加了以下内容（在刷新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>

这会破坏您的选择器，因为.prev("input")无法再找到输入

jQuery输入[name =“”]选择器不起作用

1 个答案: