jquery - 如何显示图像代替复选框？

Question

我想在选中复选框时显示绿色选中图像，而在未选中空框时显示绿色选中图像。我试图将复选框放在 div 中并设置 div 的背景，但它没有帮助我。知道该怎么办吗？下面是我想要的输出。

Answer 1

这是一个例子，用一点点 jQuery 和 CSS 完成:DEMO

$(".checkbox").click(function() {
  $(this).toggleClass('checked')
});

.checkbox {
  width: 23px;
  height: 21px;
  background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}

.checked {
  background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="checkbox">
</div>