华山资源网

用自定义图片代替原生checkbox实现全选,删除以及提交的方法
网络编程 2024/11/18 佚名
3 1

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

用自定义图片代替原生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="/UploadFiles/2021-04-02/check.png">


当然，也可以用CSSSprites精灵图。


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


换成原生JavaScript也不难。


以上就是小编为大家带来的用自定义图片代替原生checkbox实现全选,删除以及提交的方法全部内容了，希望大家多多支持~
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com