腳本之家服務器常用軟件

快捷導航

用自定義圖片代替原生checkbox實現全選,刪除以及提交的方法

更新時間：2016年10月18日 08:38:56 投稿：jingxian

下面小編就為大家?guī)硪黄米远x圖片代替原生checkbox實現全選,刪除以及提交的方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

要代替原生的checkbox。那么要實現原生checkbox能干的事。我們主要實現這幾點就可以了。

1.點擊列表中的勾選圖片。圖片會變換成相反的。

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

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

3.全選功能

4.點擊刪除，能刪除全部的勾選的圖片。

1.準備工作：因為要大量用到兩個圖片的切換，我們單獨定義出來：

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

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

我們用on事件，因為列表中的信息是動態(tài)添加進去的。

//點擊復選框圖片 
$("#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); 
 
    //上面部分是變換圖片自身，下面部分是檢測是否要變換全選圖片。 
    //通過比較圖片總數量與選中圖片數量來決定。 
    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.全選功能。改變全選圖標的同時，改變所有圖標，跟全選圖標保持一致。

//全選中的圖標 
$("#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.刪除功能。點刪除按鈕，刪除勾選的圖片所在的行。

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

//刪除選中的數據 
$("#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.最后我們要提交表單的時候，如何處理呢？我們是用ajax提交還是直接表單submit提交呢？
這里提供兩種方案的思路。

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

類似這樣，deviceIdArr就獲取到了選中的框的內容。你要獲取該列的id，也類似。

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

5.2表單提交思路。

在每一個圖片checkbox的旁邊，放上一個隱藏的真實checkbox。這樣用戶就看不到。

每一次對選中圖片進行修改的時候，都對應地修改相應隱藏checkbox的選中狀態(tài)，

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

調試的時候可以讓那些隱藏的checkbox顯現出來，方便我們直觀看到checkbox與圖片的對應狀態(tài)是否準確。

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

比如我們這個默認狀態(tài)下會顯示未選中的圖標，而選中狀態(tài)的圖標是沒有顯示的。如果等點擊的時候再來加載，就會有延遲感。

解決辦法，在頁面底部加上這一句：

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

當然，也可以用CSSSprites精靈圖。

注：本文是使用了jQuery來用自定義圖片代替原生checkbox復選框實現全選，刪除，表單提交。

換成原生JavaScript也不難。

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

用自定義圖片代替原生checkbox實現全選,刪除以及提交的方法

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具