jquery.checkbox 单选框多选框美化
1、新建html文档。
2、书写hmtl代码。<div class="check_box box"> <h1>jquery.checkbox 单选框多选框美化插件</h1> <div id="checkbox" style="width:50%;float:left"> <p><span class="check_span"><input type="checkbox" id="checkAll" /></span> 全选(点文字可选中)</p> <p><span class="check_span"><input type="checkbox" /></span> 选项1</p> <p><span class="check_span"><input type="checkbox" /></span> 选项2</p> <p><span class="check_span"><input type="checkbox" /></span> 选项3</p> <p><span class="check_span"><input type="checkbox" /></span> 选项4</p> <p><span class="check_span"><input type="checkbox" /></span> 选项5</p> </div> <div id="checkbox1" style="width:50%;float:left"> <p>没有全选且只能勾选框能选中</p> <p><span class="check_span"><input type="checkbox" /></span> 选项1</p> <p><span class="check_span"><input type="checkbox" /></span> 选项2</p> <p><span class="check_span"><input type="checkbox" /></span> 选项3</p> <p><span class="check_span"><input type="checkbox" /></span> 选项4</p> <p><span class="check_span"><input type="checkbox" /></span> 选项5</p> </div></div><div class="clearfix"></div><div class="radio_box box"> <h1>radio样式美化及选择插件</h1> <div id="radiobox" style="width:50%;float:left"> <p>点击文字可选中</p> <p><span class="radio_span"><input type="radio" name="sex" /></span> 是</p> <p><span class="radio_span"><input type="radio" name="sex" /></span> 否</p> </div> <div id="radiobox1" style="width:50%;float:left"> <p>只能选中单选框</p> <p><span class="radio_span"><input type="radio" name="mile" /></span> 是</p> <p><span class="radio_span"><input type="radio" name="mile" /></span> 否</p> </div></div>
3、书写css代码。* { margin: 0; padding: 0; }body { padding: 10px; background-color: #00374B; color: #fff; font-family: poppin, 'PingFang SC', Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif; letter-spacing: 2px; font-size: 12px; box-sizing: border-box; }h1 { font-size: 15px; font-weight: normal }.box { max-width: 500px; margin: 0 auto; }.clearfix { clear: both; }input[type="checkbox"], input[type="radio"] { margin: 0; opacity: 0; filter: alpha(opacity=0); }input:focus { outline: none }#checkbox p { cursor: pointer; }.check_span, .radio_span { display: inline-block; float: left; border: 1px solid #35a48e; width: 14px; height: 14px; text-align: center; margin-right: 10px; }.check_span:hover, .radio_span:hover { border-color: #fff; }.check_span--checked, .radio_span--checked { border-color: #fff; background: url(icon_sprites.png); }.radio_span { width: 15px; height: 15px; border: 0; background: url(icon_sprites.png) -14px 0; }.radio_span--checked { background-position: -29px 0; border: 0; }.radio_box { border-top: 1px dashed #84decc; margin-top: 20px; padding-top: 15px; }
4、书写并添加js代码。<script src="js/jquery-1.8.3.min.js"></script><script src="js/checkbox.js"></script><script>$(function(){ //有全选且点文字可以选中 $("#checkbox").selectCheck(); //无全选且只能点击勾选框 $("#checkbox1").selectCheck({ allId:null, parentSelect:null }); //点文字可选中 $("#radiobox").selectRadio(); //只能点击单选框 $("#radiobox1").selectRadio({parentSelect:null});});</script>
5、代码整体结构。
6、查看效果。
