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


Posted in jQuery onNovember 11, 2017

 最近要用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="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style type="text/css">
   .head {
    background-color: #EFEFF4;
    font-size: 16px;
    color: black;
    padding: 20px;
    font-size: 20px;
    overflow: hidden;
    margin-bottom: 10px;
   }
   .table {
    margin-top: 30px;
    border: 1px solid #CCCCCC;
   }
   .name_info {
    color: red;
   }
   .message p {
    margin: 0px;
    padding: 0px;
   }
   .form_0 {
    background-color: #EEEEEE;
   }
  </style>
 </head>
 <body>
  <div class="container-fluid">
   <div id="row" class="head">
    <div class="col-sm-12 col-md-12 col-lg-12">
     <p>视频管理</p>
    </div>
   </div>
   <div id="row" class="col-sm-12 col-md-12">
    <div class="col-xs-1">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="batchDel" class="btn btn-danger btn">批量删除 <span class="badge" id="badge_0">0</span></a>
    </div>
    <div class="col-xs-1">
     <p class="text-danger">删除成功</p>
    </div>
    <div class="col-xs-1">
     <a href="speaker_add.html" rel="external nofollow" class="btn btn-primary btn">添加</a>
    </div>
    <div id="row" class="col-xs-6 col-md-offset-1">
     <form class="form-inline form_0" role="form">
      <div class="form-group col-xs-3 col-md-3">
       <input type="text" class="form-control" id="name" placeholder="课程名称">
      </div>
      <div class="form-group col-xs-2 col-md-2">
       <select class="form-control btn-primary">
        <option>请选择课程</option>
        <option>2</option>
       </select>
      </div>
      <div class="form-group col-xs-2 col-md-2">
       <select class="form-control btn-primary">
        <option>请选择老师</option>
        <option>2</option>
       </select>
      </div>
      <div class="form-group col-xs-2 col-md-2">
       <button type="submit" class="btn btn-primary">查询</button>
      </div>
     </form>
    </div>
   </div>
   <div class="row">
    <div class="col-md-10 col-lg-10">
     <table class="table table-striped">
      <thead>
       <tr>
        <th>选择</th>
        <th>序号</th>
        <th>名称</th>
        <th>介绍</th>
        <th>讲师</th>
        <th>时长</th>
        <th>播放次数</th>
        <th>编辑</th>
        <th>删除</th>
       </tr>
      </thead>
      <tbody>
       <tr>
        <td>
         <input class="check_0" value="0" type="checkbox">
        </td>
        <td class="show_id">1</td>
        <td id="show_name">环境搭建</td>
        <td>这视频真tm牛逼</td>
        <td>老王</td>
        <td>666</td>
        <td>666</td>
        <td>
         <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
        </td>
        <td>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>删除</a>
        </td>
       </tr>
       <tr>
        <td>
         <input class="check_0" value="1" type="checkbox">
        </td>
        <td class="show_id">1</td>
        <td id="show_name">环境搭建</td>
        <td>这视频真tm牛逼</td>
        <td>老王</td>
        <td>666</td>
        <td>666</td>
        <td>
         <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
        </td>
        <td>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>删除</a>
        </td>
       </tr>
       <tr>
        <td>
         <input class="check_0" value="2" type="checkbox">
        </td>
        <td class="show_id">1</td>
        <td id="show_name">环境搭建</td>
        <td>这视频真tm牛逼</td>
        <td>老王</td>
        <td>666</td>
        <td>666</td>
        <td>
         <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
        </td>
        <td>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>删除</a>
        </td>
       </tr>
      </tbody>
     </table>
    </div>
   </div>
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
      </div>
      <div id="info" class="modal-body">你确定要删除吗?</div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
       <button type="button" id="delete_submit" class="btn btn-primary">确定</button>
      </div>
     </div>
     <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
   </div>
  </div>
  <form id="form" method="post">
   <input type="hidden" name="_method" id="_method" value="DELETE" />
   <input type="hidden" name="id" id="id" />
  </form>
 </body>
 <script type="text/javascript">
  $(document).ready(function() {
   $("#delete").click(function() {
    var click_name = $(this).parent().siblings("#show_name").html();
    var click_id = $(this).parent().siblings("#show_id").html();
    $("#info").html("你确定要删除视频:<a class='name_info'>" + click_name + "</a>吗?");
    $("#id").val(click_id);
   })
   $("#delete_submit").click(function() {
    $("#_method").val("DELETE");
    $("#form").submit();
   })
   $("#edit_submit").click(function() {
    var click_id = $(this).parent().siblings("#show_id").html();
    $("#id").val(click_id);
    $("#form").attr("method", "get");
    $("#_method").val("get");
    $("#form").submit();
   })
   //获取选中的个数
   $(".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);
   })
  })
 </script>
</html>

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

一、当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即点即改批量计数及中间遇到的坑,希望对大家有所帮助,如果大家有任何疑问欢迎各我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
You might like
php 表单验证实现代码
2009/03/10 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
js跳转页面方法实现汇总
2014/02/11 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python中while和for的区别总结
2019/06/28 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python解析微信dat文件的方法
2020/11/30 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
兼职学生的自我评价
2013/11/24 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
上课打牌的检讨书
2014/02/15 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
公司离职证明样本
2014/09/13 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书