jquery - 查看是否在 IE8 中选中了单选按钮或复选框

Question

我正在使用我在这些板上找到的一个非常简短的纯 CSS 方法，在我正在开发的在线应用程序中使用我自己设计的复选框和单选按钮。

我所做的是隐藏 radio 和检查并将我的图形显示为标签中的背景，如下所示:

input[type="radio"] {
    display: none; 
}

input[type="radio"] + label {
    display: block;
    padding: 8px 4px 8px 22px;
    background: url(../img/filter-checks.png) 0 0 no-repeat;
}

input[type="radio"]:checked + label {
background-position: -30px 0;
}

显然我对复选框使用了类似的东西。工作起来很有魅力，但不幸的是在无法处理 :checked 属性的 IE8 中并非如此。

我正在尝试使用 jquery 来修复此问题，方法是检测单选按钮是否被选中，然后添加一个类“checked”并为其分配相同的 CSS。

$('input[type="radio"],input[type="checkbox"]').each(function() {
    if ($(this).is(':checked')) {
        $(this).addClass('checked');
    }
    else {
        $(this).removeClass('checked');
    }
});

不幸的是，虽然我发现很多帖子都说 is(':checked') 应该在 IE8 中工作，但它对我来说并不适用。当我在任何其他浏览器中单击单选按钮时，我可以看到类“选中”被添加或删除，但在 IE8 中没有。

查明单选按钮或复选框在 IE8 中是否被选中的任何解决方案或替代方法？

------------ 更新 08-07 9:30 ------------

经过一些重新考虑，我完全重新设计了我的代码以专门针对单选按钮并完全省略了 :checked 东西。现在我发现真正的问题似乎是 addClass 在 IE8 中似乎不起作用 >(

我的新 jquery:

$('input[type="radio"]').click(function() {
    var radioName = $(this).attr('name');
    $(this).parent('.form-check').css('background-color', '#ff0000');
    $(this).parent('.form-check').addClass('checked');
    $('input[type="radio"][name="' + radioName + '"]').not(this).parent('.form-check').css('background-color', 'transparent');
    $('input[type="radio"][name="' + radioName + '"]').not(this).parent('.form-check').removeClass('checked');
});

添加红色背景用于测试。他们工作，addClass 不......有什么好主意吗？

------------ 更新 08-07 10:00 ------------

无视...IE8 开发人员工具显然不够发达，无法即时显示类名的更改。该功能有效，但我的 CSS 无效。

input[type="radio"]:checked + label,
.checked input[type - "radio"] + label {
background-position: -30px 0;
}

IE8 在不理解第一行 :checked 时不会读取第二行或整个语句。我的错。 此外，当单选按钮本身显示为:无时，它们在 IE8 中不存在，因此无法定位....

回到绘图板。

Answer 1

问题是 IE8 及以下版本不支持 CSS 伪类。您可以使用 Javascript 库来解决这个问题。我在我的大部分网站上都使用它，效果非常好。它叫做Selectivizr它会让你在旧版本的 IE 中使用大量的 CSS3 伪类。主页上有它支持的伪类列表。它也可以在多个库中使用，这太棒了!