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 条评论
登录 后参与评论

相关文章

Eclipse的BIRT:使用Design Engine API

假设您已经在名为“customers”的报告设计文件中将表格定义为报告项目。顾名思义,该表格用于显示示例数据库中的所有客户。此外,它还有一个用于按照国家来对项目...

32320
来自专栏编程微刊

手把手教你用vue-cli构建一个简单的路由应用

上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635

11910
来自专栏C语言及其他语言

Dev-Cpp使用入门教程

今天给大家开始介绍Dev-C++这款编译器的使用方法,由于蓝桥杯竞赛的要求,今天给大家做入门介绍。 ? 下载地址依旧见:C/C++开发编译器等常用工具下载htt...

33840
来自专栏Fundebug

微信小程序开发BUG经验总结

小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家。

564120
来自专栏北京马哥教育

Python 爬取CSDN的极客头条

这两周花了点时间读了《Python网络数据采集》,内容不多,不到200页,但是非常丰富,有入门,有提高,有注意事项,有经验之谈,有原理,有分析,读完受益匪浅。书...

41280
来自专栏Jerry的SAP技术分享

微信小程序开发系列五:微信小程序中如何响应用户输入事件

通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小...

12630
来自专栏老九学堂

【干货】最全的JavaScript调试技巧总结,必看!

调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在编码中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等...

38870
来自专栏互联网杂技

【小教程】教你拿出app中的图片资源

有一种方法通过ipa或apk包来获得每个资源的切图,今天就来简单介绍下。因为有的同学还不知道这个方法,尤其是没有技术背景的同学(我司UI妹子得知这个方法如获至宝...

29750
来自专栏ROBOTEDU

OMRONFZ系列视觉与ABB机器人的通信

ABB与OMRON之间的通信,本例采用以太网TCP无协议模式通信。通过以太网由ABB机器人程序控制ONRON视觉的场景切换,拍照判断及其判断数据的 接收。 ?...

52650
来自专栏梦魇小栈

adb(Android Debug Bridge,Android调试桥)常用命令

说到 ADB 大家应该都不陌生,即 Android Debug Bridge,Android 调试桥,身为 Android 开发的我们,熟练使用 ADB 命令将...

33030

扫码关注云+社区

领取腾讯云代金券