华山资源网

jQuery实现checkbox即点即改批量删除及中间遇到的坑
网络编程 2024/11/15 佚名
3 1

 最近要用jQuery实现一个批量删除操作，效果如下图

jQuery实现checkbox即点即改批量删除及中间遇到的坑

最终页面page.html，此页面使用了bootstrap和jQuery，如果没有需要下载一下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>视频管理</title>
  <link rel="stylesheet" type="text/css" href="css/init.css" rel="external nofollow" />
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" />
  <script src="/UploadFiles/2021-04-02/jquery-3.2.1.min.js">


上图的操作主要需要两个操作：


一、当checkBox点击时进行选中计数（带坑）。


二、当点击批量删除时，拼接选中单位的id，传递给个后台。


初看一下，感觉这些很好实现，并且实现的方法很多。当初我也是这么认为的，结果搞了一个上午.......，接下来就看看jQuery的一些坑。


我开始想法是每次点击checkBox时，对所有的checkBox进行each()遍历，如果是勾选状态就将Num++，最后将num的值赋给批量删除的数字小标签,顺便把id也拼接了。





$(".check_0").click(function(){
     var num=0;
    var del_str="";
    $(".check_0").each(function(){
     alert($(this).val()+":"+$(this).attr("checked"));
     if($(this).attr("checked")=="checked"){
      num++;
      del_str+=$(this).parent().siblings("show_id").html()+"/";
     }
     alert(this.checked);
    })
   })





当这段代码触发时，却发现一个诡异的现象：这段代码会在勾选效果前先触发。类似于beforeClick()，所以当代码遍历时，无法获取当前的勾选状态。


就这个问题，我在网上找了半天答案，硬是不知道如何解决，什么mouseup()都用了一下，都是beforeClick的效果。


最后我使用了另一种写法。





//获取选中的个数
   $(".check_0").click(function() {
    $("#badge_0").html($("input[type=checkbox]:checked").length);
    //alert($("input[type = checkbox]: checked ").length); 
   })
   //批量删除
   $("#batchDel").click(function() {
     var params = "";
     $("input[type = checkbox]:checked").each(function(index,element){
      //第一个id不需要加前缀
      if(index == 0) {
       params += "id=" +
        $(this).val();
      } else {
       params += "&id=" +
        $(this).val();
      }
     });
     alert("生成的拼接参数：" + params);
   })





　　成功运行出效果！


结论：


　　在click()中使用input[type=[checkbox]:checked]选择器获得勾选元素时，得到的就是勾选后的结果afterclick()。


　　而使用.each()遍历时，获取的是勾选前的效果beforeclick。


　　为什么一个click函数里，能得出beforeclick和aferclick两种效果？


　　坑哭......


总结


以上所述是小编给大家介绍的jQuery实现checkbox即点即改批量计数及中间遇到的坑，希望对大家有所帮助，如果大家有任何疑问欢迎各我留言，小编会及时回复大家的！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com