JSP列表中复选框批量选择功能实现

  • 格式:docx
  • 大小:19.24 KB
  • 文档页数:3

下载文档原格式

  / 8
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

对查询列表中的记录进行批量操作

1、实现的方法往往就是在每条记录前面加一个复选框,然后在列表下方放置一个“全选/

全不选”复选框。

2、当选中“全选/全不选”复选框后,列表中的所有复选框都选中,当取消“全选/全不选”

复选框后,列表中的所有复选框都取消选中。

3、当列表中的复选框都取消选中后,“全选/全不选”复选框也要取消选中。当列表中的复

选框都选中后,“全选/全不选”复选框也要选中。

4、得到所有选中记录的值。

这项功能其实也很简单,但往往用的时候都要重新再写一遍,于是把它总结为一个模块,记录下来,以便再用。

(1)首先是在每条记录前加入复选框,该处复选框中的值为“id|username”(示例),即选中此复选框会同时传两个值(传一个值的太简单,就不举例了),中间用|隔开,下面取值时会用到:

onclick="checkonebox()"/>

(2)然后在下方加入“全选/全不选”复选框。

全选/全不选

(3)关键实现javascript

//点击"全选/全不选"复选框,如果选中,则选中全部复选框,否则取消选中全部复选框function checkall() {

var ischecked = document.getElementById("checkall").checked;

if(ischecked) {

checkallbox();

}else {

discheckallbox();

}

}

//选中全部复选框

function checkallbox() {

var boxarray = document.getElementsByName("box");

for(var i = 0; i < boxarray.length; i++) {

boxarray[i].checked = true;

}

}

//取消选中全部复选框

function discheckallbox() {

var boxarray = document.getElementsByName("box");

for(var i = 0; i < boxarray.length; i++) {

boxarray[i].checked = false;

}

}

//点击某个复选框,如果所有复选框都选中,“全选/全不选”复选框也选中

//否则如果所有复选框都取消选中,“全选/全不选”复选框也取消选中function checkonebox() {

if(isallchecked()) {

document.getElementById("checkall").checked = true;

}

if(isalldischecked()) {

document.getElementById("checkall").checked = false;

}

}

//是否全部选中

function isallchecked() {

var boxarray = document.getElementsByName("box");

for(var i = 0; i < boxarray.length; i++) {

if(!boxarray[i].checked) {

return false;

}

}

return true;

}

//是否全部没有选中

function isalldischecked() {

var boxarray = document.getElementsByName("box");

for(var i = 0; i < boxarray.length; i++) {

if(boxarray[i].checked) {

return false;

}

}

return true;

}

//得到选中项的值的集合,结果为“1|小明,2|小王,3|小李”的形式function getallcheckedvalue() {

var boxvalues = "";

var boxarray = document.getElementsByName("box");

for(var i = 0; i < boxarray.length; i++) {

if(boxarray[i].checked) {

var boxvalue = boxarray[i].value;

if(boxvalues == "") {

boxvalues = boxvalue;

}else {

boxvalues = boxvalues + "," + boxvalue;

}

}

}

return boxvalues;

}

//如果只需要得到其中选中项的id值的集合,方法如下,得到的值为(1,2,3,…)

function getIds() {

var boxvalues = getallcheckedvalue();

var boxvaluesArray = boxvalues.split(",");

var ids = "";

for(var i = 0; i < boxvaluesArray.length; i++) {

var boxvalue = boxvaluesArray[i];

var boxvalueArray = boxvalue.split("|");

var id = boxvalueArray[0];

var username = boxvalueArray[1];

if(ids == "") {

ids = id;

}else {

ids = ids + "," + id;

}

}

return ids;

}

最后,总结步骤:每条记录前加复选框,加“全选/全不选”复选框,调用javascript,OK。