javascript实现列表复选框多选选中和取消多选选中

web开发过程中,经常面临批量操作,比如商品管理中,就需要批量删除,批量上架或批量下架.

先看效果:

点击"全选"时,当前页面所有的复选框都自动被选中.

如何实现呢

先看看页面代码:

先讲解一下每条记录前面的复选框:复选框的name统一的前缀,例如"product_",后面跟序号,如果每页显示5条,那么序号就是1,2,3,4,5,如果每页显示10条,序号就是从1到10,包括10.

以上看到的是静态页面,那么每条记录checkbox的name是如何生成的?那得看JSP文件了:

页面使用了JSTL标签库.

再看js实现

点击"全选"按钮,会执行js方法selectAllcheck(this),方法体如下:

 function selectAllcheck(obj){ //batch toggle checkbox
			var sum=com.whuang.hsj.$$one("product23Sum").value; //Number("${view.recordNumOfCurrent}");
			//注意:${view.recordNumOfCurrent}获取的是第一次刷新时的,后面的都是使用ajax,所以${view.recordNumOfCurrent}没有更新
			// alert(sum);
			com.whuang.hsj.selectAllcheckbox(obj,"product_",Number(sum));
		}
/*******************************************************************************
 * batch toggle checkbox
 */
com.whuang.hsj.selectAllcheckbox = function(checkboxobj, prefixStr, sum_int) {
	if (com.whuang.hsj.isCheckcheckboxOne(checkboxobj)) {
		com.whuang.hsj.setSel4CheckboxbySequence2(prefixStr, sum_int);
	} else {
		com.whuang.hsj.deSetSel4CheckboxbySequence2(prefixStr, sum_int);
	}
};
com.whuang.hsj.setSel4CheckboxbySequence2 = function(prefixStr, countMax) {
	com.whuang.hsj.setSel4CheckboxbySequence(prefixStr, 1, countMax);
};
/*******************************************************************************
 * select all
 */
com.whuang.hsj.setSel4CheckboxbySequence = function(prefixStr, countMin,
		countMax) {
	for ( var ik = countMin; ik <= countMax; ik++) {
		var checkbox227 = com.whuang.hsj.$$arr(prefixStr + ik);
		if (checkbox227 == null || checkbox227 == undefined) {
		} else {
			if (!com.whuang.hsj.isCheckcheckbox(checkbox227)) {
				com.whuang.hsj.setCheckboxByIndex(checkbox227, 0);
			}
		}
	}
};
com.whuang.hsj.deSetSel4CheckboxbySequence2 = function(prefixStr, countMax) {
	com.whuang.hsj.deSetSel4CheckboxbySequence(prefixStr, 1, countMax);
};

具体代码见附件common_util.js