javascript - checkbox 元素的 checked 属性什么时候添加到 DOM 中？

Question

我需要将所有选中的复选框着色为绿色，将未选中的复选框着色为红色。

<style>
 input[type=checkbox]+span{
   color:red;
 }
 input[type=checkbox][checked]+span{
    color:green;
 }
</style>
<label>
    <input type="checkbox" class="bike"/>
    <span>I have a bike</span></label>
<label> 
    <input type="checkbox" checked class="car"/>
    <span>I have a car</span>
</label>

页面加载时看起来不错。但是后来，当用户点击任何复选框时，它们的颜色没有改变。调试后，我知道当用户点击发生时， checked 属性没有添加到 input 标签中。有人能告诉我原因吗？

我尝试显式地放置 checked 属性然后它运行良好。

<button>Click</button>

    <script>
    $('button').click(function(){
        $('.bike').attr('checked',true);
    });
    </script>

但我不想使用任何脚本来实现这一点。有什么办法可以实现吗？
什么时候 checked 属性被添加到复选框以使其被选中？ 这是 jsfiddle .

Answer 1

有一个 :checked 伪选择器 ( updated fiddle )

为了完整起见，这里是目前对它的支持:( from MDN )

Chrome  Firefox (Gecko)       Internet Explorer  Opera  Safari
1.0     1.0 (1.7 or earlier)  9.0                9.0    3.1