专栏首页西枫里博客JS控制批量选择/取消复选框

JS控制批量选择/取消复选框

场景应用:在后台分页输出查询数据(如文章、评论),往往需要进行批量删除/审核等操作。后端程序需要读取操作的ID集合进行批量处理。而前端批量选择传入ID是最方便的使用方式。而批量传入通过使用复选框的[]方式传入数组给后端就是最便捷的办法了。直接上代码:

使用复选框,首先放置单条数据的复选框。

<input name="id[]" type="checkbox" id="id[]" value="{$v.id}">//注意后面的[],数组形式

其次,处理当前页一个总的全选/取消复选框

<input type="checkbox" name="allbox" onclick="CheckAll()">//点击执行checkall函数

第三就是CheckAll函数

function CheckAll(){ 
  for (var i=0;i<eval(form1.elements.length);i++){ 
    var e=form1.elements[i]; 
    if (e.name!="allbox") e.checked=form1.allbox.checked; 
  } 
}

最后别忘了外层套一个form标签。

这样就完成的前端页面的整个全选/取消操作模式。数据传入后台后的批量处理可以参看:单数据和批量数据的删除操作。

写在最后。

今年大年初一,西枫里在这里给所有访问者朋友拜年了,祝大家在新的一年生活如意,事业顺利,博客访问量节节攀升。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 以关联表中的count计数作为主表的排序依据(进阶版)

    上一篇文章在最后提到“在foreach循环中嵌套查询,这是非常耗费资源的”。当时考虑到本站应用场景简单,查询仅为百位数量级,性能损失忽略不计,就图简单没有深入去...

    世纪访客
  • 联通宽带FTTH,华为hg8347r改桥接模式

    家里宽带升级成50M光纤到户。换了一个光猫,导致我内网DMZ主机无法远程连接了。联通安装工程师安装好后,提供的是一个限制权限的user账户。除了能关闭wifi信...

    世纪访客
  • 以关联表中的count计数作为主表的排序依据

    标题场景例如本站右侧标签云,主要的排序依据是tag标签出现的次数。由于数据库设计时,将tag标签独立,并没有作为article文章表的一个字段。通过一个中间关联...

    世纪访客
  • 老司机用python脚本刷微信读书的时长

    送你一个偷懒的机会, abd绿色版和脚本的合集, 博主给你整理好了, 可以通过关注微信公众号jikeweikan,回复微信读书刷时长, 获取下载链接, 祝玩得愉...

    zhaoolee
  • TextCNN多标签分类:我喜欢的样子你都有(下)

    这是用 TextCNN 做多标签分类的最后一篇,关于用训练好的模型进行预测,以及封装成 Restful API(服务接口)。

    邓邓最棒
  • MyBatis两张表字段名相同产生的问题

    MyBatis两张表字段名相同, 会导致bean属性都映射为第一个表的列, 解决方法: 通过设置别名的方式让其产生区别,如 <select id="queryB...

    庞小明
  • 另一种使用SAP SAT事务码对通过浏览器启动的应用的性能测量和分析方式

    We have several questions regarding the trace functionality in parallel session....

    Jerry Wang
  • UNIX时间戳和北京时间的相互转换

    准确的说,应该是unix时间戳,是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒。一个小时表示为UNIX时间戳格式为:3600秒;一天...

    单片机点灯小能手
  • EOS 智能合约中数据表的操作方法

    中国广东省深圳市龙华新区民治街道溪山美地 518131 +86 13113668890 <netkiller@msn.com>

    netkiller old
  • 【CCF】日期计算

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    喜欢ctrl的cxk

扫码关注云+社区

领取腾讯云代金券