如何在单击时切换选中/未选中状态时更改复选框标签的颜色

Question

当我选中或取消选中时,我正在尝试更改复选框标签的字体颜色和背景颜色.我在这个网站上找到了一个javascript解决方案但是无法让代码工作.这是我到目前为止所尝试的内容.现在它将"突出显示"类附加到父div,我只希望标签更改.谢谢你的时间.

HTML:

<div class="checkboxes">
    <input type="checkbox" name="1" id="option one" value="orange"><label for="1" class="highlight">Orange</label>
    <input type="checkbox" name="2" id="option two" value="apple"><label for="1" class="highlight">Apple</label>
</div>

JavaScript:

$( '.checkboxes' ).on( 'click', 'input:checkbox', function () {
    $( this ).parent().toggleClass( 'highlight', this.checked );
}); // end checkbox style?

CSS:

.checkboxes label {
    font-family:Open Sans Italic;
    font-size: 12px;
    color: #666;
    border-radius: 20px 20px 20px 20px;
    background: #f0f0f0;
    padding: 3px 10px;
    text-align: left;
}
.highlight {
    font-family:Open Sans Italic;
    font-size: 12px;
    color: white;
    border-radius: 20px 20px 20px 20px;
    background: #86b3c1;
    padding: 3px 10px;
    text-align: left;
}

Answer 1

你可以用CSS做到这一点:

input[type=checkbox]:checked + label { /* styles that get changed */ }

演示http://dabblet.com/gist/3157721

此外,在制作演示时我注意到了一些问题:

• id="option one" - id必须只有一个,你不能有空格
• for属性的值label应该是对应的id(不name)input; 这也允许您通过单击标签而不是复选框本身来选中/取消选中复选框