有没有办法纯粹通过CSS来做到这一点？答案

【问题标题】：Is there no way to do this purely via CSS?有没有办法纯粹通过CSS来做到这一点？
【发布时间】：2011-06-09 13:24:20
【问题描述】：

我有这个 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 发生变化时发生变化，因为前者只是 默认值。

因此，我用一些 JavaScript 引导它...

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

基本上，我的问题是这是否有必要。有没有办法根据其复选框的选中或不选中状态仅通过 CSS 更改标签的样式？

【问题讨论】：

false 不是checked 的有效值。它是 HTML 中的 checked 或 XHTML 中的 checked="checked"，如果未选中则什么都没有。 DOM 中的true 和false 是布尔值。
你说得有道理，但即使我只是使用checked，取消选中该框也不会删除 HTML 属性，所以问题仍然存在。呃，站着，因为idealmachine提到了:checked伪类。

标签： javascript html css forms checkbox

【解决方案1】：

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

input:checked + label {opacity: .6}

【讨论】：