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

前端之家收集整理的这篇文章主要介绍了用自定义图片代替原生checkbox实现全选,删除以及提交的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

3.全选功能

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

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

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);

//上面部分是变换<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>自身,下面部分是检测是否要变换全选<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>。 
//通过比较<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>总<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>与选中<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a><a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>来决定。 
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.全选功能。改变全选图标的同时,改变所有图标,跟全选图标保持一致。

$(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的节点,就删除不到了。

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,也类似。

5.2

表单提交思路。

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

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

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

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

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

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

解决办法

,在页面底部加上这一句:

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

注:本文是使用了

jQuery

来用自定义图片代替原生checkBox复选框实现全选,删除,表单提交。

换成原生

JavaScript

也不难。

以上就是小编为大家带来的用自定义图片代替原生checkBox实现全选,删除以及提交的方法全部内容了,希望大家多多支持编程之家~

原文链接:https://www.f2er.com/js/45084.html

猜你在找的JavaScript相关文章