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


Posted in Javascript onOctober 18, 2016

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="images/check.png" style="display:none;">

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

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

换成原生JavaScript也不难。

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

Javascript 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 #Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 #Javascript
浅谈js的异步执行
Oct 18 #Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 #Javascript
微信小程序 教程之模块化
Oct 17 #Javascript
微信小程序 教程之注册页面
Oct 17 #Javascript
微信小程序 教程之注册程序
Oct 17 #Javascript
You might like
深入php处理整数函数的详解
2013/06/09 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
php提取微信账单的有效信息
2018/10/01 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
Javascript中replace()小结
2015/09/30 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
名片管理系统python版
2018/01/11 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python修改文件内容的3种方法详解
2019/11/15 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
医学毕业生自荐信
2013/10/11 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
先进员工事迹材料
2014/12/20 职场文书
党员发展大会主持词
2015/07/03 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis