查看是否在 IE8 中选中了单选按钮或复选框答案

【问题标题】：see if radiobuttons or checkboxes are checked in IE8查看是否在 IE8 中选中了单选按钮或复选框
【发布时间】：2013-07-05 14:30:17
【问题描述】：

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

我所做的是隐藏收音机并检查并将我的图形显示为标签中的背景，如下所示：

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 来解决此问题，方法是检测是否选中了单选按钮，然后添加一个“已选中”类并为其分配相同的 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 时，它不会读取第二行或整个语句。我的错。此外，当单选按钮本身具有 display: none 时，它们对于 IE8 不存在，因此无法定位....

回到绘图板。

【问题讨论】：

那么，您是在点击处理程序中检查它还是什么？
可能是$('input[type="radio"],input[type="checkbox"]') css3 选择器在 IE 8 中不起作用
$('#yourelement').prop( 'checked' ) 是返回真还是假？
顺便说一句，您使用的是哪个 jquery 版本？
查看您是否做错了什么：this demo on the jquery site 工作吗？

标签： jquery css internet-explorer-8 checked

【解决方案1】：

问题是 IE8 及以下不支持 CSS 伪类。您可以通过使用 Javascript 库来解决此问题。我在我的大多数网站上都使用它，并且效果很好。它被称为Selectivizr，它可以让你在旧版本的 IE 中使用大量的 CSS3 伪类。主页上有一个它支持的伪类列表。它还可以在多个库中使用，太棒了！

【讨论】：

IE8 有 partial support 用于伪类。

【解决方案2】：

为 IE 8 更改 CSS 样式，如下所示

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

【讨论】：

这行不通。当您单击复选框/单选按钮时，浏览器不会更新选中的属性。

【解决方案3】：

如果不能为ie8添加class，直接在jquery中修改css即可，例如：

$('input[type="radio"]').click(function() {

    //Reset bg and bg position of all radiobutton labels
    $('label').css('background-color', 'transparent');
    $('label').css('background-position', '0');

    //change bg and bg position of *checked* radiobutton label
    $(this).parent().css('background-color', '#ff0000');
    $(this).parent().css('background-position', '-30px 0');
});

【讨论】：