您好,登錄后才能下訂單哦!
小編給大家分享一下js怎么實現(xiàn)點擊切換checkbox背景圖片,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
在制作網(wǎng)頁的過程中,經(jīng)常需要實現(xiàn)點擊切換背景圖片的效果,本文關(guān)注的是表單中checkbox背景圖片切換的實現(xiàn)。如圖,在輸入用戶名和密碼后,用戶需要選擇是否記住密碼
圖片背景為白色表示未勾選狀態(tài) ,背景為藍(lán)色表示勾選狀態(tài) 。
HTML源碼如下:
<div class="check"> <input id="checkbox1" class="checkbox" type="checkbox" checked ="checked" /><label>記住密碼</label> </div>
其中checkbox 默認(rèn)為勾選狀態(tài)。
設(shè)置樣式,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; }
將checkbox透明度設(shè)為0,再以背景圖片來代替復(fù)選框就能得到帶有勾選圖片的效果。默認(rèn)為記住密碼的勾選狀態(tài),btn_1.png 即為背景為藍(lán)色的勾選圖片。值得注意的是,將 input 標(biāo)簽與 label 標(biāo)簽同時加上 vertical-align: middle; 屬性才能實現(xiàn)文字與復(fù)選框垂直居中對齊。
接下來實現(xiàn)單擊切換checkbox背景圖片的效果,1.9版本以下的 jQuery 里的 toggle() 方法可以直接實現(xiàn)切換:
toggle(objs) { $(objs).each(function(){ if ($(this).is(':hidden')) $(this).show(); else $(this).hide(); }); }
然而 jQuery 1.9及以上版本已經(jīng)刪除了該方法,因此可以用原生 javascript 來實現(xiàn),具體代碼如下:
$(document).ready(function(){ var flag = 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; } }) });
看完了這篇文章,相信你對“js怎么實現(xiàn)點擊切換checkbox背景圖片”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。