前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS控制批量选择/取消复选框

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

作者头像
世纪访客
发布2018-08-02 15:48:38
9.6K0
发布2018-08-02 15:48:38
举报
文章被收录于专栏:西枫里博客
...
...

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

使用复选框,首先放置单条数据的复选框。
代码语言:javascript
复制
<input name="id[]" type="checkbox" id="id[]" value="{$v.id}">//注意后面的[],数组形式
其次,处理当前页一个总的全选/取消复选框
代码语言:javascript
复制
<input type="checkbox" name="allbox" onclick="CheckAll()">//点击执行checkall函数
第三就是CheckAll函数
代码语言:javascript
复制
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标签。

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

写在最后。

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-02-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用复选框,首先放置单条数据的复选框。
  • 其次,处理当前页一个总的全选/取消复选框
  • 第三就是CheckAll函数
  • 写在最后。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档