在IE8中如何检查单选按钮或复选框是否被选中

Question

我正在使用这个论坛上发现的一种简短的纯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;
}

显然，在复选框方面我使用了类似的方法。它运作得很好，但不幸的是IE8不能处理:checked属性。

我正在尝试通过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中应该有效，但对我来说它并没有起作用。我可以看到在其他任何浏览器中单击radiobutton时，类"checked"被添加或移除，但在IE8中却没有。

有没有解决方案或替代方法来查找IE8中的radiobutton或checkbox是否被选中？

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

经过一些重新考虑，我完全重写了我的代码，专门针对radio-button，并省略了: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来说不存在，因此无法被定位。

回到起点重新设计。

- Fake Haak

---

那么，你是在单击处理程序中检查它吗？ - A. Wolff

$('#yourelement').prop('checked') 返回的是 true 还是 false？ - Sumurai8

顺便问一下，你正在使用哪个版本的jQuery？ - A. Wolff

这真让我发疯。 @roasted - 这是一个在页面加载和点击处理程序中触发的函数。我之前使用的是1.10.1版本，现在已经降级到了1.8.2版本，但结果还是一样。另外，我已经完全重写了我的函数，专门针对单选按钮而不是同时针对单选按钮和复选框，因为我意识到功能应该是完全不同的。现在对于单选按钮，我完全省略了:checked的部分，并发现在IE8中添加类名的方法根本不起作用。 - Fake Haak

@FakeHaak 你好，我也遇到了display:none的同样问题，不知道有没有办法在ie8中隐藏那个丑陋的复选框。 - Vishal Khialani

Answer 1

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

- Matthew R.

---

IE8对伪类有部分支持。 - Lark Davis

Answer 2

如果您无法为ie8添加类，则可以直接在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');
});

- EtTuBrute

Answer 3

把你的 CSS 样式改成以下这样以适配 IE 8

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

- Somnath Kadam

---

这行不通。当你点击复选框/单选框时，浏览器不会更新选中属性。 - user2115377