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

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实现全选,删除以及提交的方法全部内容了，希望大家多多支持软件开发网~