用css3可以直接用图片作为背景就可以了，不需要用js。解决方法如下：
1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvas.html。
2、打开已新建的canvas.html文件，修改title标签里的文字内容。
3、在<body></body>标签内，插入一个canvas标签，并设置id属性值。
4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。
5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。
6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。
7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。
正好最近弄了这个<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:30pxheight:30px display: nonemargin: 0pxbackground-color: red" id="lable" onclick="lable_click(this)" >
<!--<img width="30px" height="30px" src="xxx.png">或者背景图片
(点击无背景的checkbox使它变成成有背景色的对勾，
也可以如果用2个div，一个做没有对勾的背景一个做有对勾的背景，使checked一直处于隐藏状态，每次都用
document.getElementById('checked').checked = false)或document.getElementById('checked').checked = true)
使没有显示的checkbox改变它的checked值。
-->
</div>
<input id="checked" type="checkbox" value="" style="width: 30pxheight: 30pxdisplay: blockmargin: 0px" onclick ="checkbox_click(this)" />
<script>
function lable_click(obj){
obj.style.display = "none"
document.getElementById('checked').style.display = "block"
document.getElementById('checked').checked = false//
}
function checkbox_click(obj){
obj.style.display = "none"
document.getElementById('lable').style.display = "block"
}
</script>
</body>
</html>
这个得用Html做的
<form action="" method="get">
您喜欢的水果？<br />
<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="3" />梨 </label>
</form>
