jquery.checkbox 单选框多选框美化
1、新建html文档。
2、书写hmtl代码。
<div class="check_box box">
<h1>jquery.checkbox 单选框多选框美化插件</h1>
<div id="checkbox" style="width:50%;float:left">
<span class="check_span"><input type="checkbox" id="checkAll" /></span> 全选(点文字可选中)
<span class="check_span"><input type="checkbox" /></span> 选项1
<span class="check_span"><input type="checkbox" /></span> 选项2
<span class="check_span"><input type="checkbox" /></span> 选项3
<span class="check_span"><input type="checkbox" /></span> 选项4
<span class="check_span"><input type="checkbox" /></span> 选项5
</div>
<div id="checkbox1" style="width:50%;float:left">
没有全选且只能勾选框能选中
<span class="check_span"><input type="checkbox" /></span> 选项1
<span class="check_span"><input type="checkbox" /></span> 选项2
<span class="check_span"><input type="checkbox" /></span> 选项3
<span class="check_span"><input type="checkbox" /></span> 选项4
<span class="check_span"><input type="checkbox" /></span> 选项5
</div>
</div>
<div class="clearfix"></div>
<div class="radio_box box">
<h1>radio样式美化及选择插件</h1>
<div id="radiobox" style="width:50%;float:left">
点击文字可选中
<span class="radio_span"><input type="radio" name="sex" /></span> 是
<span class="radio_span"><input type="radio" name="sex" /></span> 否
</div>
<div id="radiobox1" style="width:50%;float:left">
只能选中单选框
<span class="radio_span"><input type="radio" name="mile" /></span> 是
<span class="radio_span"><input type="radio" name="mile" /></span> 否
</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、查看效果。
