原生态js对复选框的美化并且可复用。

原生态js美化复选框，当去掉js之后，还可以保留原有的复选框效果，最难得的是它可以在一个网页中多次复用~，感兴趣的程序猿可以看看。

css：

.checkbox{
display:inline-block;
width:20px;height:20px;
border-radius:3px;
border:1px solid #666;
margin-right:5px;
margin-bottom:20px;
vertical-align:top;
text-align:center;
cursor:pointer;
user-select:none;
}
.checkbox.active:after{   伪类选择器；在这个复选框后面加上为“√”的内容
content:"√";    
font-size:20px;
line-height:16px;
}
html：
<div class="checkbox-group">
<label><input type="checkbox" name="caixi" value="川菜" checked> 川菜</label>
<label><input type="checkbox" name="caixi" value="粤菜"> 粤菜</label>
<label><input type="checkbox" name="caixi" value="鲁菜" checked> 鲁菜</label>
</div>

<div class="checkbox-group">
<input type="checkbox" name="aihao" value="足球"> 足球
<input type="checkbox" name="aihao" value="篮球" checked> 篮球
<input type="checkbox" name="aihao" value="排球" checked> 排球
</div>
<div class="checkbox-group">
<input type="checkbox" name="aihao" value="足球"> 足球
<input type="checkbox" name="aihao" value="篮球" checked> 篮球
<input type="checkbox" name="aihao" value="排球" checked> 排球
</div>
js：

//复选框插件
var checkboxGroup=document.querySelectorAll('.checkbox-group');
checkboxGroup.forEach(function(group){  jQuery中的forEach()查找方法，与js中的for用法相同；


var checkboxs=group.querySelectorAll('input[type="checkbox"]');
 用querySelectorAll方法查找这一个网页中所有的复选框；

checkboxs.forEach(function(checkbox){


//隐藏原生态控件
checkbox.style.display='none';

   

var span=document.createElement('span');

span.className='checkbox'+(checkbox.checked?' active':'');

checkbox.parentNode.insertBefore(span,checkbox);


span.οnclick=function(){
     //三元算法
this.className='checkbox'+(this.className.indexOf('active')==-1?' active':'');

checkbox.checked=true;

}

})

})

题目虽然简单，但是当没有头绪的时候，参考一下是对你有一定的作用的。

有做的不对的地方，欢迎广大程序猿提意见哟~