何时检查复选框元素的属性是否添加到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当用户点击发生时,该属性没有添加到输入标签.有人可以告诉我原因吗？

我试图checked明确地放置属性然后它运作良好.

<button>Click</button>

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

但我不想使用任何脚本来实现这一目标.有没有办法让它成为可能？
实际上将checked属性添加到复选框以进行检查？这是jsfiddle.

Answer 1

有一个:checked伪选择器(更新小提琴)

为了完整性,目前支持它:( 来自MDN)

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