快捷導(dǎo)航

js實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡(jiǎn)單實(shí)例

更新時(shí)間：2017年05月08日 08:21:55 投稿：jingxian

下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在制作網(wǎng)頁的過程中，經(jīng)常需要實(shí)現(xiàn)點(diǎn)擊切換背景圖片的效果，本文關(guān)注的是表單中checkbox背景圖片切換的實(shí)現(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)簽同時(shí)加上 vertical-align: middle; 屬性才能實(shí)現(xiàn)文字與復(fù)選框垂直居中對(duì)齊。

接下來實(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 來實(shí)現(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實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解小程序緩存插件(mrc)
這篇文章主要介紹了詳解小程序緩存插件(mrc)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
JS獲取數(shù)組最大值、最小值及長(zhǎng)度的方法
這篇文章主要介紹了JS獲取數(shù)組最大值、最小值及長(zhǎng)度的方法,涉及JavaScript遍歷數(shù)組及l(fā)ength屬性的相關(guān)使用技巧,非常簡(jiǎn)潔實(shí)用,需要的朋友可以參考下
2015-11-11
AjaxUpLoad.js實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了AjaxUpLoad.js實(shí)現(xiàn)文件上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03
underscore?防抖技巧學(xué)習(xí)示例
這篇文章主要為大家介紹了underscore?防抖技巧學(xué)習(xí)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
動(dòng)態(tài)加載、移除js/css文件的示例代碼
本文簡(jiǎn)單介紹動(dòng)態(tài)加載、移除、替換js/css文件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒加載，需要的朋友參考下吧
2018-03-03
javascript中的prototype屬性實(shí)例分析說明
一說到prototype很多人可能第一個(gè)想到的是著名的prototype.js框架，當(dāng)然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。這是一個(gè)比較特殊的屬性，Javascript中的繼承一般都依賴這屬性實(shí)現(xiàn)。
2010-08-08
JavaScript性能陷阱小結(jié)(附實(shí)例說明)
JavaScript陷阱太多，因此我們得步步為營(yíng)，下面這些點(diǎn)，相信很多同學(xué)都會(huì)遇到，希望朋友們多注意下。JavaScript陷阱太多，因此我們得步步為營(yíng)，下面是一些常見的影響性能的陷阱。
2010-12-12
多瀏覽器兼容性比較好的復(fù)制到剪貼板的js代碼
復(fù)制到剪貼板的js代碼（兼容ie、firefox、chorme、safari...什么都兼容?。?
2011-10-10
JavaScript如何讀取本地excel文件、txt文件的內(nèi)容
JavaScript是一種腳本語言,廣泛應(yīng)用于前端開發(fā),這篇文章主要給大家介紹了關(guān)于JavaScript如何讀取本地excel文件、txt文件的內(nèi)容,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11