html多选框和复选框,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