html - 将选中的复选框从勾号更改为纯色背景色

Question

默认情况下，当您选中一个复选框时，它会在框中打勾。我正在尝试将其更改为纯色天气，它是 CSS 背景或检查时的图像。http://bootply.com/71996

<label class="checkbox">
    <input type="checkbox" value="">
    Content
</label>

我在这里搜索并阅读了一些答案，但没有结论性和简单性。

Answer 1

查看您更新的代码。

HTML：

<label class="checkbox">
<input value="" type="checkbox">
Content
</label>

JavaScript：

$("input[type=checkbox]").on("change", function() {
  var $chk = $(this);
  var isChecked = $chk.prop('checked');
  if (isChecked) {
    $chk.parent().addClass("checked");
  }
  else {
    $chk.parent().removeClass("checked");
  }
});

CSS：

.checkbox { color:blue; }
.checkbox:before { content:""; background-color:blue; width:15px; height:18px; display:block; position:absolute; margin-left:-20px; }
.checkbox.checked { color:red; }
.checkbox.checked:before { background-color:red; }

笔记：

JavaScript 可以简化，但我有意在.toggleClass()每次更改时检查值（而不是使用）。