前言
相信做前端的小伙伴们,多多少少都会遇到关于单选或者多选的问题,选择框大家也都不会陌生,无非就是radio和chechkbox,
但是input的这两个属性都无法更改默认样式,有时候无法满足Ui设计出的高大上,真逼格的选择框样式,这时候就需要label标签来帮忙了。将label与input绑定一起来实现各种各样的优美选择框。将样式图片设置为label标签的背景即可,点击当前的input,更改与之绑定的label的样式。上代码
单选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.choose_radio{
display:block;
float:left;
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:2px;
}
.choose_radioed{
display:block;
float:left;
width:22px;
height:22px;
border-radius:2px;
background:url(fang_choose.png) no-repeat;
background-size:100%;
}
p{
float:left;
margin:0;
}
</style>
</head>
<script src="jquery-2.1.4.min.js"></script>
<body>
<div>
<p class="title_p">单选:</p></br>
<label for="choose_1" class="input_label choose_radio ">
<input id="choose_1" type="radio" name="single" class="single_input" autocomplete ="off"/>
</label>
<p class="yijia_title_p">选项1</p>
<label for="choose_2" class="input_label choose_radio">
<input id="choose_2" type="radio" name="single" class="single_input" autocomplete ="off"/>
</label>
<p class="yijia_title_p">选项2</p>
<label for="choose_3" class="input_label choose_radio">
<input id="choose_3" type="radio" name="single" class="single_input" autocomplete ="off"/>
</label>
<p class="yijia_title_p">选项3</p>
</div>
</body>
<script>
$(".single_input").on("click",function(){
var par_label = $(this).parent();
if(this.checked){
$(".input_label").removeClass("choose_radioed").addClass("choose_radio");
par_label.removeClass("choose_radio").addClass("choose_radioed");
}else{
}
});
</script>
</html>
效果图:
多选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.choose_check{
display:block;
float:left;
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:2px;
}
.choose_checked{
display:block;
float:left;
width:22px;
height:22px;
border-radius:2px;
background:url(fang_choose.png) no-repeat;
background-size:100%;
}
.choose_input{
display:none;
}
p{
float:left;
margin:0;
}
</style>
</head>
<script src="jquery-2.1.4.min.js"></script>
<body>
<div class="address_choose_div">
<p class="title">多选:</p>
<label for="chooseAll" class="choose_label choose_check">
<input id="chooseAll" type="checkbox" name="chooseAll" class="choose_input" autocomplete ="off"/>
</label>
<p class="choose_title">全选</p></br>
<label for="choose_1" class="choose_label choose_check">
<input id="choose_1" type="checkbox" name="choose" class="choose_input" autocomplete ="off"/>
</label>
<p class="choose_title">选项1</p>
<label for="choose_2" class="choose_label choose_check">
<input id="choose_2" type="checkbox" name="choose" class="choose_input" autocomplete ="off"/>
</label>
<p class="choose_title">选项2</p>
<label for="choose_3" class="choose_label choose_check">
<input id="choose_3" type="checkbox" name="choose" class="choose_input" autocomplete ="off"/>
</label>
<p class="choose_title">选项3</p>
</div>
</body>
<script>
/*全选及取消*/
$('input[name="chooseAll"]').click(function(){
var par_label = $(this).parent();
if($(this).is(':checked')){
par_label.removeClass("choose_check").addClass("choose_checked");
$('input[name="choose"]').each(function(){
//此处如果用attr,会出现第三次失效的情况
$(this).prop("checked",true);
$(this).parent().removeClass("choose_check").addClass("choose_checked");
});
}else{
par_label.removeClass("choose_checked").addClass("choose_check");
$('input[name="choose"]').each(function(){
//此处如果用attr,会出现第三次失效的情况
$(this).prop("checked",false);
$(this).parent().removeClass("choose_checked").addClass("choose_check");
});
}
});
$('input[name="choose"]').click(function(){
var par_label = $(this).parent();
/*选项总长度*/
var length = $('input[name="choose"]').length;
/*被选中项长度 如果两个长度一样 说明全选*/
var choose_length = $('input[name="choose"]:checked').length;
if(this.checked){
par_label.removeClass("choose_check").addClass("choose_checked");
if(length == choose_length){
$('input[name="chooseAll"]').prop("checked",true);
$('input[name="chooseAll"]').parent().removeClass("choose_check").addClass("choose_checked");
}else{
$('input[name="chooseAll"]').prop("checked",false);
$('input[name="chooseAll"]').parent().removeClass("choose_checked").addClass("choose_check");
}
}else{
par_label.removeClass("choose_checked").addClass("choose_check");
if(length == choose_length){
$('input[name="chooseAll"]').prop("checked",true);
$('input[name="chooseAll"]').parent().removeClass("choose_check").addClass("choose_checked");
}else{
$('input[name="chooseAll"]').prop("checked",false);
$('input[name="chooseAll"]').parent().removeClass("choose_checked").addClass("choose_check");
}
}
});
</script>
</html>
效果图:
需要注意的是点击事件需要绑定在input上面,切记不可绑定在label上。样式中的图片记得更换哦!