文章摘要
这篇文章描述了一个基于JavaScript的多选框操作功能，主要包括以下核心内容：
1. **多选框功能实现**：通过`showModalDialog`函数调用，允许用户选择表格中的特定行，并通过`realAdd`函数将选中行的数据插入到表格中。
2. **复选框状态统计**：通过`subchk`函数统计复选框的勾选状态，并根据统计结果动态更新上方的全选框状态。如果所有复选框都勾选，全选框状态为`true`；如果都不勾选，全选框状态为`false`；否则保持`true`状态。
3. **删除操作**：通过`del`函数收集用户勾选的行ID（使用字符拼接方式），并在删除这些行后更新复选框的状态，同时倒序删除表格中的对应行。
4. **删除失败处理**：通过`realDel`函数处理删除操作失败的情况，提示用户并返回失败信息。
需要注意的是，文章中提到的使用字符拼接获取行ID的方式存在潜在的安全隐患，建议改用更安全的编码方法（如使用JSON封装数据）。
function add(){
var url=path+”/jsps/input.jsp”;
//var vReturnValue=window.showModalDialog(url,””,”dialogWidth:400px;dialogHeight:200px;status:no;”);
var returnValue=window.showModalDialog(url, “”,”dialogHeight:400px;dialogWidth:300pxl;status:no”);
if(returnValue){
// alert(returnValue.id);
realAdd(returnValue);
}
}
// 把封装过来的数据实际插入到表格
function realAdd(obj){
var tb=document.getElementById(“tb”);
var oTr=tb.insertRow();
var oCell=oTr.insertCell();
oCell.innerHTML='<input type=”checkbox” name=”chk” onclick=”subchk(this);”/>’;
oCell=oTr.insertCell();
oCell.innerHTML=obj.name;
oCell=oTr.insertCell();
oCell.innerHTML=obj.age;
oCell=oTr.insertCell();
oCell.innerHTML=obj.addr;
oCell=oTr.insertCell();
oCell.innerHTML=obj.id;
oCell.className=”iid”;
}
//全先复选框，点击上面的全选框。下面的所有复选框都要全选
function chk(obj){
var chks=document.getElementsByName(“chk”);
var len=chks.length;
for(var i=0; i<len; i++){
chks[i].checked=obj.checked;
}
}
//通过统计下面的复选框的选择情况，决定上面的复习框的三种状态
function subchk(obj){
var chks=document.getElementsByName(“chk”);
var n=0; //统计表格行中被勾选中的行数
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
n++;
}
}
var parentChk=document.getElementById(“parentChk”);
if(n==0){
parentChk.indeterminate=false;//※※※不能省
parentChk.checked=false;
}else if(n==chks.length){
parentChk.indeterminate=false;//※※※不能省
parentChk.checked=true;
}else{
parentChk.indeterminate=true;
}
}
//把用户选中行的id提交给后台,后台删除成功后返回true
function del(){
//以后我们应该用json去封装所有的id，提交给后台处理(暂时我们还没学)。
//现在我们暂时用字符拼接的方式来做,有潜在bug的
var tb=document.getElementById(“tb”);
var chks=document.getElementsByName(“chk”);
var ids=””;
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
//alert(“aaa”);
//把该行的id值获取出来
var oTr=chks[i].parentNode.parentNode;
//alert(oTr);
var id=oTr.cells[4].innerText;
//alert(id);
if(ids==””){
ids=id;
}else{
ids=ids +”,” +id;
}
}
}
if(ids==””){
alert(“请选择要删除的行”);
}else{
document.getElementById(“ids”).value=ids;
document.forms[‘f1’].submit();
}
}
function realDel(boo){
if(!boo){
alert(“删除失败!”);
return;
}
var tb=document.getElementById(“tb”);
var chks=document.getElementsByName(“chk”);
var len=chks.length;
//倒着删
for(var i=len-1;i>=0;i–){
if(chks[i].checked){
tb.deleteRow(i+1);
}
}
var chks=document.getElementsByName(“chk”);
var n=0; //统计表格行中被勾选中的行数
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
n++;
}
}
// 删除之后更细上面复选框的状态
var parentChk=document.getElementById(“parentChk”);
if(n==0){
parentChk.indeterminate=false;//※※※不能省
parentChk.checked=false;
}else if(n==chks.length){
parentChk.indeterminate=false;//※※※不能省
parentChk.checked=true;
}else{
parentChk.indeterminate=true;
}
}