移动端复选框checkbox兼容性问题

需求

公司接了一个活动页的项目，然后就给我了，挺简单一个项目，开需求会时都很简单，然后客户那边给设计图，设计图一天给一张，还每天下午快下班才给，简直捉急。项目就是做两套样式，PC和移动端都有，还要PC端响应式，移动端适配，兼容主流浏览器以及移动端。
在做移动端的时候遇到了一个发现很晚的小bug，然后令我今晚现在还在家里敲代码，想着敲也是敲，不如顺手记录一下。
需求就是一个单选框，做成复选框的样式，正方形的框，点击对号出现，再点击消失。很简单一件事，直接用<input type="checkbox" >直接解决。

问题和解决

1.然而，调试的时候正常，然而到测试用手机测试的时候发现复选框在移动端是一个单选框，圆形的，那就很蒙蔽。然后就想了一下用背景图来替代。

#check-email{
	width: 10px;
	height: 10px;
	border-radius: 0;
	background-color: transparent;
	vertical-align: middle;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#check-email{
    background:url("../image/fuxuankuang_weixuanzhong.png") no-repeat;
	background-size: cover;
}
#check-email:checked{
    background:url("../image/fuxuankuang_xuanzhong.png") no-repeat;
	background-size: cover;
}

注意要给input加一个border-radius，因为在移动端 input有一个默认样式。

2.然而快到上线了，我自己在测试的时候发现，在qq上打开正式服的时候对号样式的背景图没有切换过来，在移动端浏览器上可以。应该是因为qq对css3支持比较差的原因。既然qq不支持:checked，那就用js来写了。首先给input标签前面放了一个span标签，内容为√,设置定位调一下大小，然后给其设置display:none;接着就用js来控制span标签的出现与否。
用的jq

  $('#check-email').click(function(e){
  	e.stopPropagation();
  	if($('#check-email').prop('checked')){
  		$('.check-email-before').show()
  	}else{
  		$('.check-email-before').hide()
  	}
  })

这样一来又要改html,css还要改js,问题虽然解决了，但是心里还是不爽的，直接用css来做简直舒爽万分，然而又用到了js，因为是今晚临时想出来的，不知道还有没有其他优化和解决的办法，如果有的话希望您能发表一下看法，帮助我一下。谢谢。
移动端一不注意就会出现这样那样的问题，以后要多多看看这些方面的东西。