Input[type="checkbox"]:checked + Span Doesnot Work In IE8?

Question

input[type='checkbox']:checked + span does not work in IE. Actually the style rule is not even seen in the developers tool, when inspect element is done.

Solution 1:

Like it was mentioned, IE8 does not support :checked, thus a solution can be using JavaScript, such as this:

<!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>

Hopefully this helps!

Solution 2:

since you're only option is to do it with javascript,you can do something like this(if you want to use 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");
}

and you just add this function to every checkbox's onchange property like this

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

Html5 Library

Input[type="checkbox"]:checked + Span Doesnot Work In IE8?

Solution 1:

Solution 2:

Post a Comment for "Input[type="checkbox"]:checked + Span Doesnot Work In IE8?"