How to use images for check boxes using CSS or may be JavaScript?

问题

It is obviously very simple question but I have never done such thing before. My designer want some thing like this for check boxes (it is on left side. Checked ones are grey and other white).

回答1:

One idea is to use a span with background-image (empty box), hide a related checkbox, and assign a clickhandler to the the span (onclick: change checked attribute of the related hidden checkbox, change background image of the span accordingly).

Here is an example of that

回答2:

For this sort of thing i use jQuery UI. An example is here : http://jqueryui.com/demos/button/#checkbox

and some example code:

<script>
$(function() {
    $( "#check" ).button();
    $( "#format" ).buttonset();
});
</script>

来源：https://stackoverflow.com/questions/9496581/how-to-use-images-for-check-boxes-using-css-or-may-be-javascript