纯粹通过CSS无法做到这一点吗？

Question

我有这个CSS规则......

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

对于这个HTML ...

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

我认为，当我检查或取消选中它们时，它会变得不透明或半透明。 但是，结果是checked="true属性在DOM element.checked发生时不会改变，因为前者只是默认值。 / p>

因此，我用一点JavaScript来引导它......

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

基本上，我的问题是这是否有必要。是否有某种方法可以通过CSS更改标签的样式，基于其复选框的已选中状态？

Answer 1

存在:checked CSS3 pseudo class，但它不适用于Internet Explorer（至少版本8及以下版本）。

input:checked + label {opacity: .6}