快捷導(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)頁(yè)的過程中，經(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)文章

JS類型判斷的四種方法詳解
JavaScript中有七種原始數(shù)據(jù)類型和幾種引用數(shù)據(jù)類型,本文將清楚地介紹四種用于類型判斷的方法,分別是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray(),并介紹其使用方法和判定原理,需要的朋友可以參考下
2024-08-08
微信小程序http連接訪問解決方案的示例
這篇文章主要介紹了微信小程序http連接訪問解決方案的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
js閉包實(shí)現(xiàn)按秒計(jì)數(shù)
閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。相信很少有人能直接看懂這句話，因?yàn)樗枋龅奶珜W(xué)術(shù)。其實(shí)這句話通俗的來說就是：JavaScript中所有的function都是一個(gè)閉包。
2015-04-04
如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST
本文將通過不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請(qǐng)求，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2023-07-07
html+css+js實(shí)現(xiàn)別踩白板小游戲
大家好,本篇文章主要的講的是html+css+js實(shí)現(xiàn)別踩白板小游戲，感興趣的同學(xué)趕快來看一看吧，覺得不錯(cuò)的話可以收藏一下哦，方便下次瀏覽
2021-11-11
詳解使用uni-app開發(fā)微信小程序之登錄模塊
這篇文章主要介紹了詳解使用uni-app開發(fā)微信小程序之登錄模塊，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
三種Webpack打包方式(小結(jié))
這篇文章主要介紹了三種Webpack打包方式(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
JavaScript函數(shù)增強(qiáng)以及額外知識(shí)
函數(shù)就是封裝了一段可以被重復(fù)執(zhí)行調(diào)用的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)增強(qiáng)以及額外知識(shí)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
javascript如何定義對(duì)象數(shù)組
本文主要介紹javascript如何定義對(duì)象數(shù)組，兩種方法，比較實(shí)用，希望能給大家做一個(gè)參考。
2016-06-06
javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03