|  RSS订阅  |  加入收藏

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

在后台进行批量修改和删除操作,一般需要传入操作ID,而复选框最合适用于批量选择操作。本人介绍一种使用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标签。

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

写在最后。

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

打赏
  javascript    
转载请注明出处,未经许可禁止商用!
西枫里 熊掌号
代码改变世界 ———— 半路出家,全程修道
发表评论
*依据《网络安全法》规定,您需实名认证后才能评论!
@雅兮网:大神?哪儿呢,我瞅瞅。
全栈大神啊,前后端都给力
@笛声:同乐同乐。祝大佬万事如意,财源广进,旺年旺旺~
新年快乐,祝在新的一年里一切顺利,数钱烧坏100台 点钞机。
@银色月航:也给月航兄拜年了,祝月航万事如意。两小宝贝健康成长~
新年快乐,月航祝西枫里博客流量蹭蹭上涨,财源滚滚而来。