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 */ }

demo http://dabblet.com/gist/3157721

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

id="option one" - id必须只有一个而且你不能有空格
for的{{1}}属性的值应为相应label的{{1}}（不是id）;这也允许您通过单击标签而不是复选框本身来选中/取消选中复选框

Answer 2

标签出现在复选框之后，您的代码似乎是用于包装复选框的标签，如下所示：

<label for="1" class="highlight">Orange
    <input type="checkbox" name="1" id="option one" value="orange">
</label>

更改html或更改JS以定位下一个元素而不是最接近的父元素：

$( '.checkboxes' ).on( 'click', 'input[type="checkbox"]', function () {
    $( this ).next('label').toggleClass( 'highlight', this.checked );
});

此外，您的CSS有问题，直接定位标签将优先于高亮类，因此即使应用了类，它也永远不会改变颜色。

这是一个小提琴，我已经通过在针对高级别课程时更加具体来修复它：

FIDDLE

而Raminson是正确的，你应该用括号对齐复选框并键入=“”。

Answer 3

closest()找不到与所选元素最接近的元素。它找到最近的父级，您可以使用next()方法，尝试以下方法：

获取与选择器匹配的第一个元素，从当前元素开始并逐步向上遍历DOM树。

$('.checkboxes').on('click', 'input[type="checkbox"]', function () {
     $(this).next('label').toggleClass('highlight', this.checked);
});

请注意:checkbox选择器为deprecated。

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

3 个答案: