原生态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;
}
})
})
题目虽然简单,但是当没有头绪的时候,参考一下是对你有一定的作用的。
有做的不对的地方,欢迎广大程序猿提意见哟~