复选框批量处理前端实现

在项目中，对业务的批量处理是一个非常常见的方式，在具体的业务流畅，一般是以复选框多选进入批量处理的页面

下面就以一个具体实例作为讲解

先从前端开始

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="tbDataTable">
<thead>
<tr>
<td><input type="checkbox" name="chkall" onclick="checkAll(this,'employeeIDs');" /></td>
<tb>...</tb>
</tr>

这是列表的标题，一般这里的复选框主要是用来全选或者全不选

具体功能实现参考http://heisetoufa.iteye.com/blog/227350

下面来看表格内容的代码

<tb:iterate id="column" indexId="index" name="exampleForm" property="listChunk.collection" 

type="...common.vo.EmployeeDetailInfoVO">
<tr>
<td width="2%"><html:multibox property="employeeIDs" onclick="chkSingle(this,'employeeIDs');">
<bean:write name="column" property="oid" /></html:multibox></td>
<tb/>...<td>
<pre name="code" class="html">        </tr>

...

上面的代码运用了迭代器，拿到的Form是exampleForm,具体的参数listChunk，由于结构的特殊性，需要listChunk.collection来取值，最后面是类型，如果是自定义，则最好添加，下面到了复选框，其中<bean:write name="column property="oid" />就是复选框里面的值，它并显示出来，但会在提交的时候放到Form里面用于action的接收

这里还对onclick进行了指定，一般来讲可以是变色，加粗等，来区分未选择的，网上有很多现成的模板，这里不进行具体讲解

这时，对应的按钮就可以提交了~~~~

例如<a href="XXX.do?state=...onclick="function1(); return false;""/>  

这里的function1()主要用于判断是否有选择的复选框，如果没有则给出提示

具体实例如下,这里用function1调用function2函数

function function1(){
if(function2('employeeIDs','请选择要操作的记录')){
document.internalDismissionForm.action = "...";

document.internalDismissionForm.submit() ;
}
}

function function2(chkName, alertMsg, confirmMsg){
var chkResult = false;
var inputs = document.getElementsByTagName('INPUT');
for (i = 0;i<inputs.length;i++){
if (inputs[i].name == chkName){
if (inputs[i].checked){
if(!confirmMsg){
chkResult = true;
return chkResult;
}
return window.confirm(confirmMsg);
}
}
}
window.alert(alertMsg);
return chkResult;
}

function2是一个很重要的模板