`

jquery实现全选,全部选并且获取字段,实现指定字符删除

阅读更多

【前言】

   刚刚给后台加了个全选后快捷删除功能,这里用我用jquery来实现。

   (1)全选和全部选

   (2)获取选择的数据

   (3)对数据做截取处理,然后传递后台

 

【主体】

      用jquery处理的话,最好不要用attr方法增加属性,否则会出现第三次点击不生效的情况,用prop方法较好。用prop方法时注意jquery版本,必须是1.8之后的版本,否则不支持

<table class="table table-bordered ">
 <thead class="tab_head">
 <tr>
  <td> <input type="checkbox" onclick="selectAll()"></td>
  <th>名称</th>
  <th>角明</th>
  <th>所统</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td> <input type="checkbox"></td>
  <td>系管</td>
  <td>管角</td>
  <td>安台</td>
 </tr>
 <tr>
  <td> <input type="checkbox"></td>
  <td>统管</td>
  <td>员角</td>
  <td>安平</td>
 </tr>
 <tr>
  <td> <input type="checkbox"></td>
  <td>管理</td>
  <td>角色</td>
  <td>武进</td>
 </tr>
 </tbody>
 </table>
 <script>
 function selectAll(){
 $("input[type='checkbox']").each( function() {
  if($(this).prop("checked")==true) {
  $("input[type='checkbox']").prop('checked', true);
  return;
  } else {
  $("input[type='checkbox']").prop('checked', false);
  return;
  }
 });
 }
 </script>

 以上便可以完成全选和全不选

 下面获取全选的数据并进行截取处理

$('#batchDel').on('click',function(){
            var idList = '';
            $.each($('input:checkbox:checked'),function(){
                idList+=$(this).val()+',';
            });
            //这里输出结果格式会是  on,aaa,bbb,ccc,
            所以接下来要截取掉前后多余字符on,和,
            var idListone = idList.substr(0, idList.length - 1);//删除末尾,
            var idListtwo = idListone.replace("on,","");//删除首位的on,
            console.log(idListtwo)
            if(idListtwo == 'on'){
                layer.alert('请选择要删除的文章');
            }else if(idListtwo == ''){
                layer.alert('请选择要删除的文章');
            }else{
                if(confirm('确认删除')){
                    window.location.href = "__MODULE__/Article/del/id/"+idListtwo;
                }
            }
        })

 补充说明:弹框用的layer进行渲染

 

 

【拓展】JS如何去除指定字符串

两种方式可以实现,这里推荐使用第一种方法

1:使用replace函数替换

       var  str="hello world!";

       str=str.replace("l","");

       即使用空串替换某一个字符串,则是可以实现去除指定字符串功能

2:使用字符串分割函数在聚合

    var str="hello world!"

    var items=str.split("o")

    会得到一个数组,数组中包括利用o分割后的多个字符串(不包括o)

    var newStr=items.join("");

     会得到一个新字符串,将数组中的数组使用空串连接成一个新字符串

 

 

 

 

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    jQuery+php简单实现全选删除的方法

    在Web开发中,全选删除功能是一种常见的需求,它允许用户一次性选择并删除多个条目。本教程将介绍如何使用jQuery和PHP来实现这个功能,涉及到的主要知识点包括jQuery的选择器、事件处理、AJAX通信以及PHP的数据库...

    jquery实现勾选复选框触发事件给input赋值

    - **全选/全不选功能**: 通过`data-type="checkall"`的复选框来控制所有其他复选框的选中状态,实现全选和全不选的功能。 #### 4. jQuery操作和选择器 - **类选择器**: 使用`$('[data-type="checkbox"]')`来选取...

    js 分页全选或反选标识实现代码

    这个实现确保了在分页场景下,用户的多选操作(全选、反选、单选)能够正确无误地反映在表格中,并且在切换页面时,这些选择状态能够得到保留。同时,代码还处理了防止ID重复的问题,确保了数据的一致性。

    CHECKBOX 的全选、取消及跨页保存的实现方法

    然后,将原有的`hfDel`值合并到新字符串中,避免丢失之前未展示在当前页面的已选项目。 三、实现细节 1. 当用户点击全选按钮时,调用`CheckAll()`或`UnCheckAll()`函数,同时更新`hfDel`的值。 2. 当单个Checkbox...

    ASP.Net.技巧收集.pdf

    - **实现方法**: 使用`.ToString()`方法并指定符合本地化的格式字符串。 #### 20. 表格超连接列传递参数 - **定义**: 在表格的超链接列中传递参数。 - **实现方法**: 在链接URL中包含参数。 #### 21. 清空 Cookie ...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    基于ORM实现用户增加删除修改以及查看详细 Django字段类型介绍 DjangoORM字段参数介绍 DjangoORM外键操作 基于DjangoORM的外键实现增加用户(含select标签) 作业 第20周 课程安排 上课内容回顾 Django一对多的...

    基于JQUERY的两个ListBox子项互相调整的实现代码

    在本文中,我们将深入探讨如何使用jQuery来实现在两个ListBox之间互相调整子项的功能。这个功能常见于多种用户界面设计中,例如颜色选择、选项筛选等,允许用户在多个选项间进行选择和移动。 首先,我们需要理解...

    jqgrid的说明文档

    - **删除功能:** 调用`del()`方法,支持全选或多选删除,树形结构类似。 - **修改功能:** 调用`edit()`方法,未选中行时提示选择,提交后更新数据。 - **添加链接:** 在特定列设置为链接,通过函数实现页面跳转。...

    asp 批量删除选中的多条记录的实现代码

    在ASP(Active Server Pages)开发中,批量删除多条记录是一项常见的需求,特别是在处理大量数据时,能够提高效率,减少用户等待时间。批量删除的基本思路是通过用户选择多个记录,然后通过服务器端的脚本一次性执行...

    经典的GridView72种使用技巧

    此外,还可以添加一个全选复选框,并在客户端脚本中处理其状态变化,以便自动选中所有行或取消选中所有行。 #### 6. 鼠标移到GridView某一行时改变该行的背景色 可以通过客户端脚本实现这一功能。有两种常见的实现...

    EasyUI实现二级页面的内容勾选的方法

    通过查找二级页面的form表单(如`#selectForm`)以及其中的隐藏字段`input[name=selectData]`,可以获取到JSON格式的存储了勾选数据的字符串。然后,使用`jQuery.parseJSON`将其转换为JavaScript对象(Map),进一步...

    python入门到高级全栈工程师培训 第3期 附课件代码

    本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和数据链路层 08 网络层和arp协议 09 传输层和应用...

    php程序员面试题(含html、JavaScript、php和mysql)

    - 后台取值:通常通过表单提交,然后在服务器端通过相应的表单字段名称获取。 #### jQuery使用 **问题:**jQuery使用通过ID取得某元素。 **解析:**在jQuery中,可以通过 `$('#elementId')` 快速获取具有特定ID的...

    工作中常用到的JS表单验证代码(包括例子)

    对于复选框,有时候需要实现全选的功能。`checkboxs_all`函数就是用于这个目的,它会根据传入的复选框状态,改变所有同名称复选框的选中状态。 另外,特定格式的数据,比如邮政编码,也需要特定的验证。`check_...

    文章管理系统

    7.[纠正]纠正部分浏览器后台列表管理的复选框全选失效的BUG 8.[纠正]纠正部分浏览器后台列表管理的多选处理按钮和下拉菜单失效的BUG 9.[改变]后台兼容模式提升到IE8模式 10.修复其他诸多小细节 2013年07月19日 V...

    点此处秒后立即下载

    在ASP中,数据可以在Web页面间传递,比如通过查询字符串、隐藏字段、Session或Application对象等。 3. **Python**:Python是一种高级编程语言,广泛用于Web开发、科学计算和数据分析。其中,Django是一个流行的...

Global site tag (gtag.js) - Google Analytics