Question

input[type="checkbox"]:checked + span在IE中不起作用。实际上，当检查元素完成时，开发人员工具中甚至没有看到样式规则。

<label>
<input type="checkbox" name="Hello" id="Hello"/>
<span>Hello</span>
</label>

CSS：

input[type="checkbox"]:checked + span {
font-weight:bold;
}

选中该复选框后，我正在尝试将范围设为粗体。这适用于Chrome，但不适用于IE8。另外，o验证为什么它不起作用，我试图检查元素，我确实在那里找到了这种风格规则。希望这很清楚。

还有其他解决办法吗？

Answer 1

就像提到的那样，IE8不支持：选中，因此解决方案可以使用JavaScript，例如：

<!DOCTYPE html>
<html>
<body>

    <style>
        /*
        input[type="checkbox"]:checked + span {
font-weight:bold;
}*/
    </style>
    <label>
        <input onchange="on_click()" type="checkbox" name="Hello" id="Hello"/>
        <span id ="hello">Hello</span>
    </label>

    <script>
        count = 0;
        function on_click() {
            var hello = "Hello";
            count = count + 1;
            if (count % 2 == 0) {
                document.getElementById("hello").innerHTML = hello;

            } else {

                document.getElementById("hello").innerHTML = hello.bold();
            }
        }
    </script>
</body>

希望这有帮助！

Answer 2

因为你只有选择用javascript做，你可以做这样的事情（如果你想使用jquery）：

function checkboxIscheckedHandler(el) {
    var _this = $(el);
    if (_this.checked)
        _this.next('span').css("font-weight", "bold");
    else
        _this.next('span').css("font-weight", "normal");
}

您只需将此功能添加到每个复选框的onchange属性中，如此

<input type="checkbox" onchange="checkboxIscheckedHandler(this)" name="Hello" id="Hello"/>

输入[type =“checkbox”]：选中+ span在IE8中不起作用？

2 个答案: