4

当我选中或取消选中时，我正在尝试更改复选框标签的字体颜色和背景颜色。我在此站点上找到了一个 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;
}
4

3 回答 3

9

你可以只使用 CSS 来做到这一点：

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

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

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

  • id="option one"- id 必须只有一个并且不能有空格
  • 的for属性值label应该是对应的id（不是name）input；这还允许您通过单击标签而不是复选框本身来选中/取消选中复选框
于 2012-07-22T00:33:25.587 回答
3

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

<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 有问题，直接定位标签将优先于高亮类，因此即使应用了该类，它也永远不会改变颜色。

这是一个小提琴，我在针对 highligth 类时更具体地修复了它：

小提琴

Raminson 是正确的，您应该使用括号和 type="" 来定位复选框。

于 2012-07-22T00:19:54.760 回答
2

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

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

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

请注意:checkbox选择器是deprecated.

于 2012-07-22T00:21:55.920 回答