默认的单选多选框样式不能满足我们的需求，而css又不兼容低版本ie，因此，很多时候，我们会用一些span，div等标签来模拟他们。本次我用了label。原理是给label绑定事件点击切换class来切换选中样式。好处是不用绑定input的选中事件，点击label，input会自行选中。样式如图（样式自由定义，个人可自行发挥）

 

html代码如下：

checkboxradio

css代码：

input{
   display:none}.ui-checkbox{
   background-color: white;border-radius: 5px;border:1px solid #d3d3d3;width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle;line-height: 20px;}.ui-radio{
   background-color: white;border-radius: 15px;border:1px solid #d3d3d3;width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle;line-height: 20px;}.checked{
   background-color: #eee;}.checked:after{
   content:"\2714";}

js代码：（注：不要忘记引jquery）

$(document).on('click','.ui-checkbox',function(e){    if(e.target.tagName.toUpperCase()=='LABEL'){        $(this).toggleClass('checked');    }});$(document).on('click','.ui-radio',function(e){    if(e.target.tagName.toUpperCase()=='LABEL'){        var elenName = $(this).find("input").prop("name");        $('input[name='+elenName+']').parent('label').removeClass('checked');        $(this).addClass('checked');    }});

 

熟悉了远离及思路，可自行修改优化。