下面是测试代码：
HTML代码：

<label class="herocheckbox "  onclick="javascript:aaa();">
<input type="checkbox" id="hero1"  value="hero1">
<input type="checkbox" id="hero2"  value="hero2">
<input type="checkbox" id="hero3"  value="hero3">
</label>

JS代码：

<script type="text/javascript">
function aaa(){
	alert("1");
}
</script>

CSS：

<style type="text/css">
.herocheckbox {
width: 40px;
height: 40px;
float: left;
margin: 10px;
border:1px solid #ccc;
}
.herocheckbox input {
position: absolute;
left: -11000px;
}
</style>

为什么在点击label后，弹出两次框？而不是一次？
将里面的input 清空后就剩下一次。
将label 改成p 也是一次