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

【问题标题】：when is checked attribute of check box element added to DOM?何时将复选框元素的选中属性添加到 DOM？
【发布时间】：2013-08-06 19:57:49
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css checkbox

【解决方案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

【讨论】：

我不确定这是否重要，但如果我为标签设置 for 属性并为输入设置相应的 id（单击标签而不是复选框时），我认为响应速度似乎更快)

【解决方案2】：

这是一个很好的功能，通过使用一些类：

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

对于checked 类，您可以添加一些样式，例如颜色...

【讨论】：