模拟单选框，多选框

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

html代码如下：

<span>checkbox</span>
<label class="ui-checkbox"><input type="checkbox" name="check" value="1"></label>
<label class="ui-checkbox"><input type="checkbox" name="check" value="2"></label>
<label class="ui-checkbox"><input type="checkbox" name="check" value="3"></label>
<span>radio</span>
<label class="ui-radio"><input type="radio" name="radio" value="1"></label>
<label class="ui-radio"><input type="radio" name="radio" value="1"></label>
<label class="ui-radio"><input type="radio" name="radio" value="1"></label>

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‘);
}
});

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

模拟单选框，多选框

原文：http://www.cnblogs.com/jidi/p/customInput.html