如何显示图像以代替复选框？ [英] How to display image in place of checkbox?

问题描述

当选中复选框并未选中空框时，我想显示绿色选中的图片。我试图把复选框在div和设置div的背景，但它不帮助我。任何想法该怎么办？下面是我想要的输出。

I want to display green checked image when checkbox is checked and when not checked empty box. I tried to put checkbox in div and set div's background but it is not helping me out. Any idea what to do? Below is the output I want.

推荐答案

像这样用小jQuery和CSS： DEMO

Like this with little jQuery and css: DEMO

<div class="checkbox">
</div>

.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%
}

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

这篇关于如何显示图像以代替复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！