用自定义图片代替原生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 相关文章推荐
使用typeof方法判断undefined类型
Sep 09 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
小程序自定义轮播图圆点组件
Jun 25 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
JS跨域代码片段
2012/08/30 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
layui导航栏实现代码
2017/05/19 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Django数据统计功能count()的使用
2020/11/30 Python
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
介绍一下gcc特性
2015/10/31 面试题
人力资源专业推荐信
2013/11/29 职场文书
承办会议欢迎词
2014/01/17 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
春节慰问信范文
2015/02/15 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android