源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-12-06 00:26 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用自定义图片代替原生checkbox实现全选,删除以及提交的方法
UI妹子觉得原生的checkbox复选框太丑,非要用图片来代替,那就依她。做出来的效果类似这样: [img]http://files.jb51.net/file_images/game/201610/20151101131550956.png[/img] 要代替原生的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.删除功能。 点删除按钮,删除勾选的图片所在的行。  [b]注意:[/b]里面的循环是[b]倒序循环[/b]。 这样处理的原因是:如果顺序循环,那么删除了前面的行,真实的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提交呢? 这里提供两种方案的思路。 [b]5.1 [/b]ajax思路,本人比较喜欢用ajax提交。 类似这样,deviceIdArr就获取到了选中的框的 内容。 你要获取该列的id,也类似。
var deviceIdArr = []; 
$('#ul li img').each(function() { 
  if($(this).attr('src') == checkUrl){ 
    deviceid = trim($(this).parent().text()); 
    deviceIdArr.push(deviceid); 
  } 
}); 
[b]5.2[/b]表单提交思路。 在每一个图片checkbox的旁边,放上一个隐藏的真实checkbox。这样用户就看不到。 每一次对选中图片进行修改的时候,都对应地修改相应隐藏checkbox的选中状态, 最后提交的时候直接提交隐藏checkbox的状态就好。 调试的时候可以让那些隐藏的checkbox显现出来,方便我们直观看到checkbox与图片的对应状态是否准确。 6.一点优化意见。为了避免 第一次 点击 图片时 切换图片的延迟感,可 预加载 选中状态的图片 和 未选中状态的图片。  比如我们这个默认状态下会显示未选中的图标, 而选中状态的图标是没有显示的。 如果等点击的时候再来加载,就会有延迟感。 [b]解决办法[/b],在页面底部加上这一句:
<img src="images/check.png" style="display:none;"> 
当然,也可以用CSSSprites精灵图。 注:本文是使用了[b]jQuery[/b]来用自定义图片代替原生checkbox复选框实现全选,删除,表单提交。 换成原生[b]JavaScript[/b]也不难。 以上就是小编为大家带来的用自定义图片代替原生checkbox实现全选,删除以及提交的方法全部内容了,希望大家多多支持编程素材网~
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部