前言
相信做前端的小夥伴們，多多少少都會遇到關於單選或者多選的問題，選擇框大家也都不會陌生，無非就是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上。樣式中的圖片記得更換哦！