(轉) http://blog.csdn.net/liusaint1992/article/details/49557557
做出來的效果類似這樣:
要代替原生的checkbox。 那麼要實現原生checkbox能幹的事。我們主要實現這幾點就可以了。
1.點擊列表中的勾選圖片。圖片會變換成相反的。
2.如果當前是全選狀態,不勾選列表中的某一項,全選處的圖片變成未勾選的狀態。
如果點擊了某一項使列表成了全選的狀態, 全選處的圖片變成勾選狀態。
3.全選功能
4.點擊刪除,能刪除全部的勾選的圖片。
1.準備工作:因爲要大量用到兩個圖片的切換,我們單獨定義出來:
- var uncheckUrl = 'images/uncheck.png';
- var checkUrl = 'images/check.png';
2.點擊列表中的勾選圖片,圖片變成相反的,並且可能引發 全選圖片的變化。
我們用on事件,因爲列表中的信息是動態添加進去的。
- //點擊複選框圖片
- $("#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.刪除功能。 點刪除按鈕,刪除勾選的圖片所在的行。
注意:裏面的循環是倒序循環。 這樣處理的原因是:如果順序循環,那麼刪除了前面的行,真實的imglength就變小了,所有後面的節點的索引值都發生了變化,往前移了, 而我們 eq(i)來刪除序號爲i的節點,就刪除不到了。
- //刪除選中的數據
- $("#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.1ajax思路,本人比較喜歡用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的選中狀態,
最後提交的時候直接提交隱藏checkbox的狀態就好。
調試的時候可以讓那些隱藏的checkbox顯現出來,方便我們直觀看到checkbox與圖片的對應狀態是否準確。
6.一點優化意見。爲了避免 第一次 點擊 圖片時 切換圖片的延遲感,可 預加載 選中狀態的圖片 和 未選中狀態的圖片。
比如我們這個默認狀態下會顯示未選中的圖標, 而選中狀態的圖標是沒有顯示的。 如果等點擊的時候再來加載,就會有延遲感。
解決辦法,在頁面底部加上這一句:
- <img src="images/check.png" style="display:none;">
當然,也可以用CSSSprites精靈圖。
注:本文是使用了jQuery來用自定義圖片代替原生checkbox複選框實現全選,刪除,表單提交。
換成原生JavaScript也不難。