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

用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法

 更新時(shí)間:2016年10月18日 08:38:56   投稿:jingxian  
下面小編就為大家?guī)硪黄米远x圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

UI妹子覺得原生的checkbox復(fù)選框太丑,非要用圖片來代替,那就依她。做出來的效果類似這樣:

要代替原生的checkbox。 那么要實(shí)現(xiàn)原生checkbox能干的事。我們主要實(shí)現(xiàn)這幾點(diǎn)就可以了。

1.點(diǎn)擊列表中的勾選圖片。圖片會(huì)變換成相反的。

2.如果當(dāng)前是全選狀態(tài),不勾選列表中的某一項(xiàng),全選處的圖片變成未勾選的狀態(tài)。

如果點(diǎn)擊了某一項(xiàng)使列表成了全選的狀態(tài), 全選處的圖片變成勾選狀態(tài)。

3.全選功能

4.點(diǎn)擊刪除,能刪除全部的勾選的圖片。

1.準(zhǔn)備工作:因?yàn)橐罅坑玫絻蓚€(gè)圖片的切換,我們單獨(dú)定義出來:

var uncheckUrl = 'images/uncheck.png'; 
var checkUrl = 'images/check.png'; 

2.點(diǎn)擊列表中的勾選圖片,圖片變成相反的,并且可能引發(fā) 全選圖片的變化。

我們用on事件,因?yàn)榱斜碇械男畔⑹莿?dòng)態(tài)添加進(jìn)去的。

//點(diǎn)擊復(fù)選框圖片 
$("#ul").on('click', 'li img', function(event) { 
 
  var imgDom = $(this); 
 
  if(imgDom.attr("src")==checkUrl){ 
    $("#SelectAllImg").attr("src",uncheckUrl); 
    imgDom.attr("src",uncheckUrl); 
  }else{ 
    imgDom.attr("src",checkUrl); 
 
    //上面部分是變換圖片自身,下面部分是檢測(cè)是否要變換全選圖片。 
    //通過比較圖片總數(shù)量與選中圖片數(shù)量來決定。 
    var imgLength = $('#ul li img').length; 
    var checkLength = 0; 
 
    for (var i = 0; i <= imgLength; i++) { 
      if($('#ul li img').eq(i).attr("src") == checkUrl){ 
        checkLength ++; 
      } 
    } 
 
    if(imgLength == checkLength){ 
      $("#SelectAllImg").attr("src",checkUrl);   
    } 
  } 
}); 

3.全選功能。改變?nèi)x圖標(biāo)的同時(shí),改變所有圖標(biāo),跟全選圖標(biāo)保持一致。

//全選中的圖標(biāo) 
$("#SelectAllImg").click(function() { 
  if($(this).attr("src")== checkUrl){ 
 
    $(this).attr("src",uncheckUrl); 
    $("#ul li img").attr("src",uncheckUrl); 
  }else{ 
    $(this).attr("src",checkUrl); 
    $("#ul li img").attr("src",checkUrl); 
  } 
}); 

4.刪除功能。 點(diǎn)刪除按鈕,刪除勾選的圖片所在的行。 

注意:里面的循環(huán)是倒序循環(huán)。 這樣處理的原因是:如果順序循環(huán),那么刪除了前面的行,真實(shí)的imglength就變小了,所有后面的節(jié)點(diǎn)的索引值都發(fā)生了變化,往前移了, 而我們 eq(i)來刪除序號(hào)為i的節(jié)點(diǎn),就刪除不到了。

//刪除選中的數(shù)據(jù) 
$("#del").click(function() { 
 
  var imgLength = $('#ul li img').length; 
  var checkDom = ''; 
 
  for (var i = imgLength - 1; i >= 0; i--) { 
    checkDom = $('#ul li img').eq(i); 
    if(checkDom.attr("src") == checkUrl){ 
      checkDom.parent().remove(); 
    }; 
  }; 
 
}); 

5.最后我們要提交表單的時(shí)候,如何處理呢?  我們是用ajax提交還是直接表單submit提交呢?
這里提供兩種方案的思路。

5.1 ajax思路,本人比較喜歡用ajax提交。

類似這樣,deviceIdArr就獲取到了選中的框的 內(nèi)容。 你要獲取該列的id,也類似。

var deviceIdArr = []; 
$('#ul li img').each(function() { 
  if($(this).attr('src') == checkUrl){ 
    deviceid = trim($(this).parent().text()); 
    deviceIdArr.push(deviceid); 
  } 
}); 

5.2表單提交思路。

在每一個(gè)圖片checkbox的旁邊,放上一個(gè)隱藏的真實(shí)checkbox。這樣用戶就看不到。

每一次對(duì)選中圖片進(jìn)行修改的時(shí)候,都對(duì)應(yīng)地修改相應(yīng)隱藏checkbox的選中狀態(tài),

最后提交的時(shí)候直接提交隱藏checkbox的狀態(tài)就好。

調(diào)試的時(shí)候可以讓那些隱藏的checkbox顯現(xiàn)出來,方便我們直觀看到checkbox與圖片的對(duì)應(yīng)狀態(tài)是否準(zhǔn)確。

6.一點(diǎn)優(yōu)化意見。為了避免 第一次 點(diǎn)擊 圖片時(shí) 切換圖片的延遲感,可 預(yù)加載 選中狀態(tài)的圖片 和 未選中狀態(tài)的圖片。 

比如我們這個(gè)默認(rèn)狀態(tài)下會(huì)顯示未選中的圖標(biāo), 而選中狀態(tài)的圖標(biāo)是沒有顯示的。 如果等點(diǎn)擊的時(shí)候再來加載,就會(huì)有延遲感。

解決辦法,在頁面底部加上這一句:

<img src="images/check.png" style="display:none;"> 

當(dāng)然,也可以用CSSSprites精靈圖。

注:本文是使用了jQuery來用自定義圖片代替原生checkbox復(fù)選框?qū)崿F(xiàn)全選,刪除,表單提交。

換成原生JavaScript也不難。

以上就是小編為大家?guī)淼挠米远x圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法全部?jī)?nèi)容了,希望大家多多支持腳本之家~

相關(guān)文章

  • jQuery展示表格點(diǎn)擊變色、全選、刪除

    jQuery展示表格點(diǎn)擊變色、全選、刪除

    這篇文章主要為大家詳細(xì)介紹了jQuery展示表格點(diǎn)擊變色、全選、刪除的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • Jquery 學(xué)習(xí)筆記(一)

    Jquery 學(xué)習(xí)筆記(一)

    從今天起正式學(xué)習(xí)Jquery(實(shí)際嚴(yán)格講已經(jīng)用了幾個(gè)月的Jquery的一丁點(diǎn)東西),邊學(xué)邊做邊記筆記;閱讀書籍《鋒利的Jquery》+Jquery API Doc。
    2009-10-10
  • 純JAVASCRIPT圖表動(dòng)畫插件Highcharts Examples

    純JAVASCRIPT圖表動(dòng)畫插件Highcharts Examples

    官方提供免費(fèi)的下載包以及詳細(xì)的文檔說明,非常的值得收藏。
    2011-04-04
  • 基于jQuery的圖片剪切插件

    基于jQuery的圖片剪切插件

    網(wǎng)頁應(yīng)用程序需要對(duì)豐富的內(nèi)容提供簡(jiǎn)單易用的上傳和操作方式,但是這樣會(huì)給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù),這個(gè)詳細(xì)的教程將包括在jQuery庫上創(chuàng)建此參加的每一個(gè)步驟。
    2011-08-08
  • Javascript中封裝window.open解決不兼容問題

    Javascript中封裝window.open解決不兼容問題

    window.open不兼容,其實(shí)不是, 因?yàn)椴荒苤苯訄?zhí)行, 必須通過用戶手動(dòng)觸發(fā)才行,下面有個(gè)實(shí)例,大家可以看看
    2014-09-09
  • jQuery如何獲取動(dòng)態(tài)添加的元素

    jQuery如何獲取動(dòng)態(tài)添加的元素

    這篇文章主要介紹了jQuery如何獲取動(dòng)態(tài)添加的元素的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06
  • jQuery中:animated選擇器用法實(shí)例

    jQuery中:animated選擇器用法實(shí)例

    這篇文章主要介紹了jQuery中:animated選擇器用法,實(shí)例分析了:animated選擇器的功能、定義及匹配動(dòng)畫效果元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • 基于jquery擴(kuò)展漂亮的CheckBox(自己編寫)

    基于jquery擴(kuò)展漂亮的CheckBox(自己編寫)

    默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限,下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用
    2013-11-11
  • jQuery中parent()方法用法實(shí)例

    jQuery中parent()方法用法實(shí)例

    這篇文章主要介紹了jQuery中parent()方法用法,實(shí)例分析了parent()方法的功能、定義及取得緊鄰父元素的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jquery.picsign圖片標(biāo)注組件實(shí)例詳解

    jquery.picsign圖片標(biāo)注組件實(shí)例詳解

    這篇文章主要介紹了jquery.picsign 自己封裝的第一個(gè)開源組件,需要的朋友可以參考下
    2018-02-02

最新評(píng)論