欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年05月08日 08:21:55   投稿：jingxian  
下面小編就為大家?guī)硪黄猨s實現(xiàn)點擊切換checkbox背景圖片的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在制作網(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背景圖片的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS類型判斷的四種方法詳解

    JS類型判斷的四種方法詳解

    JavaScript中有七種原始數(shù)據(jù)類型和幾種引用數(shù)據(jù)類型,本文將清楚地介紹四種用于類型判斷的方法,分別是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray(),并介紹其使用方法和判定原理,需要的朋友可以參考下
    2024-08-08
  • 微信小程序http連接訪問解決方案的示例

    微信小程序http連接訪問解決方案的示例

    這篇文章主要介紹了微信小程序http連接訪問解決方案的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • js閉包實現(xiàn)按秒計數(shù)

    js閉包實現(xiàn)按秒計數(shù)

    閉包是一個擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個函數(shù)），因而這些變量也是該表達(dá)式的一部分。相信很少有人能直接看懂這句話，因為他描述的太學(xué)術(shù)。其實這句話通俗的來說就是：JavaScript中所有的function都是一個閉包。
    2015-04-04
  • 如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST 請求

    如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST

    本文將通過不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請求，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2023-07-07
  • html+css+js實現(xiàn)別踩白板小游戲

    html+css+js實現(xiàn)別踩白板小游戲

    大家好,本篇文章主要的講的是html+css+js實現(xiàn)別踩白板小游戲，感興趣的同學(xué)趕快來看一看吧，覺得不錯的話可以收藏一下哦，方便下次瀏覽
    2021-11-11
  • 詳解使用uni-app開發(fā)微信小程序之登錄模塊

    詳解使用uni-app開發(fā)微信小程序之登錄模塊

    這篇文章主要介紹了詳解使用uni-app開發(fā)微信小程序之登錄模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • 三種Webpack打包方式(小結(jié))

    三種Webpack打包方式(小結(jié))

    這篇文章主要介紹了三種Webpack打包方式(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • JavaScript函數(shù)增強以及額外知識

    JavaScript函數(shù)增強以及額外知識

    函數(shù)就是封裝了一段可以被重復(fù)執(zhí)行調(diào)用的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)增強以及額外知識的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • javascript如何定義對象數(shù)組

    javascript如何定義對象數(shù)組

    本文主要介紹javascript如何定義對象數(shù)組，兩種方法，比較實用，希望能給大家做一個參考。
    2016-06-06
  • javascript實現(xiàn)簡易數(shù)碼時鐘

    javascript實現(xiàn)簡易數(shù)碼時鐘

    這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)簡易數(shù)碼時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03

最新評論