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

程序员在开发的时候，经常会遇到对查询列表中的记录进行批量操作的情况。

1、实现的方法往往就是在每条记录前面加一个复选框，然后在列表下方放置一个“全选/全不选”复选框。
2、当选中“全选/全不选”复选框后，列表中的所有复选框都选中，当取消“全选/全不选”复选框后，列表中的所有复选框都取消选中。
3、当列表中的复选框都取消选中后，“全选/全不选”复选框也要取消选中。当列表中的复选框都选中后，“全选/全不选”复选框也要选中。
4、得到所有选中记录的值。

这项功能其实也很简单，但往往用的时候都要重新再写一遍，于是把它总结为一个模块，记录下来，以便再用。
（1）首先是在每条记录前加入复选框，该处复选框中的值为“id|username”（示例），即选中此复选框会同时传两个值（传一个值的太简单，就不举例了），中间用|隔开，下面取值时会用到：

<input id="box" name="box" type="checkbox" value="id|username" onclick="checkonebox('checkall','box')"/>

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

<input id="checkall" 	type="checkbox" value="" onclick="checkboxall('checkall','box')"/> 全选/全不选

(3)关键实现javascript

//点击"全选/全不选"复选框，如果选中，则选中全部复选框，否则取消选中全部复选框
function checkboxall( Allname,name) {
	var ischecked = document.getElementById(Allname).checked;
	if(ischecked) {
		checkallbox(name);
	}else {
		discheckallbox(name);
	}
}
//选中全部复选框
function checkallbox(name) {
	var boxarray = document.getElementsByName(name);
	for(var i = 0; i < boxarray.length; i++) {
		boxarray[i].checked = true;
	}
}
//取消选中全部复选框
function discheckallbox(name) {
	var boxarray = document.getElementsByName(name);
	for(var i = 0; i < boxarray.length; i++) {
		boxarray[i].checked = false;
	}
}

//点击某个复选框，如果所有复选框都选中，“全选/全不选”复选框也选中
//否则如果所有复选框都取消选中，“全选/全不选”复选框也取消选中
function checkonebox(Allname,name) {
	if(isallchecked(name)) {
		document.getElementById(Allname).checked = true;
	}
	if(isalldischecked(name)) {
		document.getElementById(Allname).checked = false;
	}
}

//是否全部选中
function isallchecked(name) {
	var boxarray = document.getElementsByName(name);
	for(var i = 0; i < boxarray.length; i++) {
		if(!boxarray[i].checked) {
			return false;
		}
	}
	return true;
}
//是否全部没有选中
function isalldischecked(name) {
	var boxarray = document.getElementsByName(name);
	for(var i = 0; i < boxarray.length; i++) {
		if(boxarray[i].checked) {
			return false;
		}
	}
	return true;
}

//得到选中项的值的集合，结果为“1|小明,2|小王,3|小李”的形式
function getallcheckedvalue(name) {
	var boxvalues = "";
	var boxarray = document.getElementsByName(name);
	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。