圖片背景為白色表示未勾選狀態(tài)绅作，背景為藍(lán)色表示勾選狀態(tài)肺孵。如:記住密碼的選框
先看下THML：checkbox 默認(rèn)為勾選狀態(tài)纷铣。
<div class="check">
? <input id="checkbox1"class="checkbox"type="checkbox"checked ="checked"/>
<label>記住密碼</label>
</div>
我們也來(lái)學(xué)習(xí)下css樣式：
.check{
? text-align:right;
? font-size:24px;
? height:50px;
? width:150px;
? background:url(img/btn_1.png) left center no-repeat;
}
.checkbox{
? width:50px;
? height: 50px;
? vertical-align: middle;
? filter:alpha(opacity=0);
? -moz-opacity:0;
? -khtml-opacity: 0;
? opacity: 0;
}
label{
? vertical-align:middle;
}
opacity在css3中是控制透明度池凄，從0到100衅澈，0表是完全透明炊琉，100表示完全不透明九火。
將checkbox透明度設(shè)為0藕赞，再以背景圖片來(lái)代替復(fù)選框就能得到帶有勾選圖片的效果缝左。默認(rèn)為記住密碼的勾選狀態(tài)亿遂，btn_1.png即為背景為藍(lán)色的勾選圖片浓若。值得注意的是渺杉，將 input 標(biāo)簽與 label 標(biāo)簽同時(shí)加上 vertical-align: middle;屬性才能實(shí)現(xiàn)文字與復(fù)選框垂直居中對(duì)齊。
接下來(lái)實(shí)現(xiàn)單擊切換checkbox背景圖片的效果：
1.9版本以下的 jQuery 里的 toggle() 方法可以直接實(shí)現(xiàn)切換：
toggle(objs) {
? $(objs).each(function(){
? ? ? if($(this).is(':hidden')) $(this).show();else$(this).hide();
? ? });
}
然而 jQuery 1.9及以上版本已經(jīng)刪除了該方法挪钓，因此可以用原生 javascript 來(lái)實(shí)現(xiàn)是越，具體代碼如下：
$(document).ready(function(){
? varflag = 1;
? $(".check").click(function(){
? ? if(flag == 1){
? ? $(".check").css("background","url(img/btn_1.png) left center no-repeat");
? ? flag= 0;
? ? }else{
? ? ? $(".check").css("background","url(img/btn_2.png) left center no-repeat");
? ? ? flag= 1;
? ? }
? });
});
其中 btn_2.png 為背景為白色的未勾選圖片。
至此碌上，點(diǎn)擊復(fù)選框倚评，就可實(shí)現(xiàn)背景圖片的任意切換
