Question

我刚刚开始使用jQuery，我有一个表单，我想用标签替换复选框，这些标签将改变颜色以指示是否选中复选框。所以我的代码很胖，使标签完全消失，然后重新出现在相同（错误）的类中，而不仅仅是.off类。

如果这是错误的方法让我知道，我不熟悉JS中的最佳实践和设计模式。

以下是我的代码：

HTML：

<label class='off'>
  <input type='checkbox'>
  TEXT
</label>

CSS：

label {
    padding: 3px;
    font-size: 16px;
}
.off {
    background-color: #E00;
}
.on {
    background-color: #0C0;
}
label > input {
    display: none;
}

使用Javascript：

$(document).ready( function(){
  $("label").click( function(){
    $(this).first().toggle( function(){
      $(this).first()
      .removeClass("off")
      .addClass("on");
    }, function(){
      $(this).first()
      .removeClass("on")
      .addClass("off");
    });
  });
});

Answer 1

如果您要使用jQuery，我建议您改用以下内容：

Updated Example

$('input:checkbox').off('change').on('change', function(){
    $(this).parent('label').prop('class', this.checked ? 'on' : 'off');
});

您还可以通过重构HTML并使用:checked伪类来完全避免使用jQuery。

Alternative example

HTML

<input type="checkbox" id="checkbox">
<label for="checkbox">Text</label>

CSS

label {
    padding: 3px;
    font-size: 16px;
    background-color: #E00;
}
input[type="checkbox"] {
    display: none;
}
input:checked + label {
    background-color: #0C0;
}

Answer 2

这是标签背景颜色的一个示例，它通过检查输入本身的checked属性来检查是否选中了复选框：

$(function () {
    $('input[type="checkbox"]').change(function () {
       var on = this.checked;
       $(this).parent('label').toggleClass('off', !on).toggleClass('on', on);
    });
});

jsFiddle Demo

Answer 3

你只能做那个CSS：

<input id="mycheckbox" type="checkbox" />
<label for="mycheckbox">TEXT</label>

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label{
    padding: 3px;
    font-size: 16px;
    background-color: #E00;
}
input[type="checkbox"]:checked + label {
    background-color: #0C0;
}

Demo

切换标签的类别

3 个答案: