用自定义图片代替原生checkbox实现全选,删除以及提交的方法

UI妹子觉得原生的checkbox复选框太丑，非要用图片来代替，那就依她。做出来的效果类似这样：

要代替原生的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.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的选中状态，
最后提交的时候直接提交隐藏checkbox的状态就好。
调试的时候可以让那些隐藏的checkbox显现出来，方便我们直观看到checkbox与图片的对应状态是否准确。
6.一点优化意见。为了避免第一次点击图片时切换图片的延迟感，可预加载选中状态的图片和未选中状态的图片。
比如我们这个默认状态下会显示未选中的图标，而选中状态的图标是没有显示的。如果等点击的时候再来加载，就会有延迟感。
解决办法，在页面底部加上这一句：

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

当然，也可以用CSSSprites精灵图。
注：本文是使用了jQuery来用自定义图片代替原生checkbox复选框实现全选，删除，表单提交。
换成原生JavaScript也不难。
以上就是小编为大家带来的用自定义图片代替原生checkbox实现全选,删除以及提交的方法全部内容了，希望大家多多支持脚本之家~