用自定义图片代替原生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管中窥豹 形参与实参浅析
Dec 17 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
如何利用node转发请求详解
Sep 17 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php disk_free_space 返回目录可用空间
2010/05/10 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
php分页查询的简单实现代码
2017/03/14 PHP
再谈javascript面向对象编程
2012/03/18 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
python http基本验证方法
2018/12/26 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
大学生简短的自我评价分享
2014/02/20 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
离职信范本
2015/06/23 职场文书