（转） 用自定义图片代替原生checkbox实现全选，删除以及提交

（转） http://blog.csdn.net/liusaint1992/article/details/49557557

做出来的效果类似这样：

要代替原生的checkbox。 那么要实现原生checkbox能干的事。我们主要实现这几点就可以了。

1.点击列表中的勾选图片。图片会变换成相反的。

2.如果当前是全选状态，不勾选列表中的某一项，全选处的图片变成未勾选的状态。

   如果点击了某一项使列表成了全选的状态，        全选处的图片变成勾选状态。

3.全选功能

4.点击删除，能删除全部的勾选的图片。

1.准备工作：因为要大量用到两个图片的切换，我们单独定义出来：

[javascript]  view plain  copy

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

2.点击列表中的勾选图片，图片变成相反的，并且可能引发 全选图片的变化。

我们用on事件，因为列表中的信息是动态添加进去的。

[javascript]  view plain  copy

1. //点击复选框图片  
2. $("#ul").on('click', 'li img', function(event) {  
3.   
4.     var imgDom = $(this);  
5.   
6.     if(imgDom.attr("src")==checkUrl){  
7.         $("#SelectAllImg").attr("src",uncheckUrl);  
8.         imgDom.attr("src",uncheckUrl);  
9.     }else{  
10.         imgDom.attr("src",checkUrl);  
11.   
12.         //上面部分是变换图片自身，下面部分是检测是否要变换全选图片。  
13.         //通过比较图片总数量与选中图片数量来决定。  
14.         var imgLength = $('#ul li img').length;  
15.         var checkLength = 0;  
16.   
17.         for (var i = 0; i <= imgLength; i++) {  
18.             if($('#ul li img').eq(i).attr("src") == checkUrl){  
19.                 checkLength ++;  
20.             }  
21.         }  
22.   
23.         if(imgLength == checkLength){  
24.             $("#SelectAllImg").attr("src",checkUrl);      
25.         }  
26.     }  
27. });  

3.全选功能。改变全选图标的同时，改变所有图标，跟全选图标保持一致。

[javascript]  view plain  copy

1. //全选中的图标  
2. $("#SelectAllImg").click(function() {  
3.     if($(this).attr("src")== checkUrl){  
4.   
5.         $(this).attr("src",uncheckUrl);  
6.         $("#ul li img").attr("src",uncheckUrl);  
7.     }else{  
8.         $(this).attr("src",checkUrl);  
9.         $("#ul li img").attr("src",checkUrl);  
10.     }  
11. });  

4.删除功能。 点删除按钮，删除勾选的图片所在的行。  

  注意：里面的循环是倒序循环。 这样处理的原因是：如果顺序循环，那么删除了前面的行，真实的imglength就变小了，所有后面的节点的索引值都发生了变化，往前移了， 而我们 eq(i)来删除序号为i的节点，就删除不到了。

[javascript]  view plain  copy

1. //删除选中的数据  
2. $("#del").click(function() {  
3.   
4.     var imgLength = $('#ul li img').length;  
5.     var checkDom = '';  
6.   
7.     for (var i = imgLength - 1; i >= 0; i--) {  
8.         checkDom = $('#ul li img').eq(i);  
9.         if(checkDom.attr("src") == checkUrl){  
10.             checkDom.parent().remove();  
11.         };  
12.     };  
13.   
14. });  

5.最后我们要提交表单的时候，如何处理呢？  我们是用ajax提交还是直接表单submit提交呢？

这里提供两种方案的思路。

   5.1ajax思路，本人比较喜欢用ajax提交。

      类似这样，deviceIdArr就获取到了选中的框的 内容。 你要获取该列的id，也类似。

     

[javascript]  view plain  copy

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

   5.2表单提交思路。

  在每一个图片checkbox的旁边，放上一个隐藏的真实checkbox。这样用户就看不到。

  每一次对选中图片进行修改的时候，都对应地修改相应隐藏checkbox的选中状态， 

  最后提交的时候直接提交隐藏checkbox的状态就好。

  调试的时候可以让那些隐藏的checkbox显现出来，方便我们直观看到checkbox与图片的对应状态是否准确。

6.一点优化意见。为了避免 第一次 点击 图片时 切换图片的延迟感，可 预加载 选中状态的图片 和 未选中状态的图片。  

比如我们这个默认状态下会显示未选中的图标， 而选中状态的图标是没有显示的。 如果等点击的时候再来加载，就会有延迟感。

解决办法，在页面底部加上这一句：

[html]  view plain  copy

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

当然，也可以用CSS Sprite s精灵图。

注：本文是使用了jQuery来用自定义图片代替原生checkbox复选框实现全选，删除，表单提交。

换成原生JavaScript也不难。