javascript - 切换标签的类别

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;
}