用自定义图片代替原生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() { 								 
 1/2    1 2 下一页 尾页