用自定义图片代替原生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 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
微信小程序实现锚点跳转
Nov 23 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
javascript实现动态标签云
2015/10/16 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
合作经营协议书
2014/04/17 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
地方课程教学计划
2015/01/19 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
劳动模范获奖感言
2015/07/31 职场文书