Is there no way to do this purely via CSS?

I've got this CSS rule...

input[checked="false"] + label {opacity: .6}

For this HTML...

<input type="checkbox" checked="true" name="whatever" value="whatever" id="whatever">
<label for="whatever">Whatever</label>

And I would think that as I check or uncheck them, it would become opaque or semi-transparent. However, it turns out the checked="true attribute doesn't change when the DOM element.checked does, since the former is simply the default value.

As such, I've bootstrapped it with a bit of JavaScript...

document.getElementById('whatever').addEventListener('change', toggleChecked, false);
function toggleChecked() {
    this.setAttribute('checked', this.checked);
}

Basically, my question 开发者_StackOverflowis whether this is necessary or not. Is there some way to change the label's style via CSS only, based on the checked-or-not status of its checkbox?

There exists the :checked CSS3 pseudo class, but it does not work on Internet Explorer (at least version 8 and below).

input:checked + label {opacity: .6}