0

所以这个问题从昨天下午开始就让我发疯了。我一直在为我们的网站开发一个报价计算器，我正在尝试为我的表单上的单选按钮设置样式。报价计算器可以在这里看到：

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 中，我的标签不会“取消突出显示”。我尝试了许多选择器的变体，使用伪选择器、过滤器，但仍然没有运气。有人对此有所了解吗？

4

1 回答 1

2

<label />在 IE 中，您的链接脚本之一在和之间添加以下内容<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")无法再找到输入

于 2013-07-16T16:00:17.863 回答