模拟单选框，多选框

　　默认的单选多选框样式不能满足我们的需求，而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');
    }
});

 

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

转载于:https://www.cnblogs.com/jidi/p/customInput.html