何时将复选框元素的选中属性添加到DOM？

Question

I need to color all the check boxes that are checked to green and unchecked one's to red.

<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>

It looks good when page is loaded. But later, when user clicks on any check box,thier color is not being changed.After debugging, I came to know that checked attribute is not added to input tag when user click happens. Can somebody tell me the reason?

I tried to put checked attribute explicitly then it worked well.

<button>Click</button>

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

But I dont want to use any script to achieve this. Is there any way to make it possible?
when actually the checked attribute is added to check box to make it checked? Here is the jsfiddle .

Answer 1

There's a :checked pseudo-selector ( updated fiddle )

For completeness here's the current support for it: ( from MDN )

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

Answer 2

This is nice function for this, by using some class:

checkbox.on('click', function(){
    $(this).toggleClass('checked');
    if ($(this).hasClass('checked')) {
        $(this).prop("checked", true);
    }
    else {
        $(this).prop("checked", false);
    }
});

For class checked you can add some style like colors...