html - 我网站的单选按钮在 IE 中不起作用

Question

有什么办法可以让这个在 IE 中工作吗？ 我正在尝试设计一项调查，但它在 IE6 中不起作用 悬停在上面很好，但检查的只是不起作用

CSS:

.A label {
    display:inline-block;
    background-color:#F36;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
    width:775px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.A label:hover{
    background-color: #C36;
}

.A input[type="radio"]:checked + label {
    background-color: #C36;
}

HTML:

<div class="A">
 <input type="radio" name="price" value="1" id="1PR" checked="checked" /><label for="1PR">£0-2</label><br />
 <input type="radio" name="price" value="2" id="2PR" /><label for="2PR">£3-£5</label><br />
 <input type="radio" name="price" value="3" id="3PR" /><label for="3PR">£6-£8</label><br />
 <input type="radio" name="price" value="4" id="4PR" /><label for="4PR">£9-£11</label><br />
 <input type="radio" name="price" value="5" id="5PR" /><label for="5PR">£12-£14</label>
</div>

Answer 1

IE9 之前不支持 :checked 伪类。

对于早期版本的 IE，无法使用纯 CSS 来实现。当单选按钮更改时，您需要使用 Javascript 添加一个类。下面是一个使用 jQuery 的示例:

$(document).ready(function() {
    $('input[type="radio"]:checked').addClass("checked");
    $('input[type="radio"]').change(function() {
        var $this = $(this);
        $("input.checked").removeClass("checked");
        if ($this.prop("checked")) {
            $this.addClass("checked");
        }
    });
});

您可以在此处查看此代码的运行情况:http://jsfiddle.net/4RnbZ/1/