JS级联的复选框，菜鸟急求！

//判断所有的checkbox的选中状态
//@id : checkbox的id
function checkedStatus(id){

    //获取checkbox
    var temp = document.getElementById(id);

    //设置checkbox的下级checkbox的状态
    setChildCheckBox(temp);

    //设置checkbox的上级checkbox的状态
    setParentCheckBox(temp);
}

//获取checkbox的下级checkbox信息
//@entity : checkbox的DOM对象
function findChildCheckBox(entity){

    //存放下级checkbox的数组
    var chkArray = new Array();

    //判断是否有input标签
    if(document.getElementsByTagName("input")){

        //获取所有的input标签
        var inputs = document.getElementsByTagName("input");

        //遍历input标签，获取下级checkbox
        for(var i = 0; i < inputs.length; i++){
            var ele = inputs[i];

            //判断type是“checkbox”，并且checkbox的parentId等于entity的id
            if(ele.type == "checkbox" && ele.parentId == entity.id){
                chkArray.push(ele);
            }
        }
    }
    return chkArray;
}

//获取checkbox的同级checkbox信息
//@entity : checkbox的DOM对象
function findBrotherCheckBox(entity){

    //存放同级checkbox的数组
    var chkArray = new Array();

    //判断是否有input标签
    if(document.getElementsByTagName("input")){

        //获取所有的input标签
        var inputs = document.getElementsByTagName("input");

        //遍历input标签，获取同级checkbox
        for(var i = 0; i < inputs.length; i++){
            var ele = inputs[i];

            //判断type是“checkbox”，并且checkbox的parentId等于entity的parentId
            if(ele.type == "checkbox" && ele.parentId == entity.parentId){
                chkArray.push(ele);
            }
        }
    }
    return chkArray;
}

//获取checkbox的上级checkbox信息
//@entity : checkbox的DOM对象
function findParentCheckBox(entity){

    //存放上级checkbox的对象
    var _element = null;

    //判断是否有input标签
    if(document.getElementsByTagName("input")){

        //获取所有的input标签
        var inputs = document.getElementsByTagName("input");

        //遍历input标签，获取上级checkbox
        for(var i = 0; i < inputs.length; i++){
            var ele = inputs[i];

            //判断type是“checkbox”，并且checkbox的id等于entity的parentId
            if(ele.type == "checkbox" && ele.id == entity.parentId){
                _element = ele;
                break;
            }
        }
    }
    return _element;
}

//设置checkbox的下级checkbox的状态
//@entity : checkbox的DOM对象
function setChildCheckBox(entity){

    //entity的选中状态
    var status = entity.checked;

    //获取entity的下级checkbox
    var childList = findChildCheckBox(entity);

    //判断是否有下级
    if(childList.length > 0){

        //遍历下级checkbox，并设置状态
        for(var i = 0; i < childList.length; i++){
            childList[i].checked = status;

            //设置childList[i]的下级checkbox的状态
            setChildCheckBox(childList[i]);
        }
    }
}

//设置checkbox的上级checkbox的状态
//@entity : checkbox的DOM对象
function setParentCheckBox(entity){

    //entity的上级checkbox的选中状态
    var parentChecked = true;

    //获取entity的上级checkbox
    var parentCheckBox = findParentCheckBox(entity);

    //判断是否有上级
    if(parentCheckBox){

        //获取entity的同级checkbox
        var brotherList = findBrotherCheckBox(entity);

        //判断是否有同级
        if(brotherList.length > 0){

            //遍历同级checkbox
            for(var i = 0; i < brotherList.length; i++){

                //如果同级的checkbox有未选中的状态，则设置上级的checkbox的状态为false
                if(brotherList[i].checked == false){
                    parentChecked = false;
                    break;
                }
            }
        }

        //设置上级checkbox的选中状态
        parentCheckBox.checked = parentChecked;

        //设置parentCheckbox的上级checkbox的状态
        setParentCheckBox(parentCheckBox);
    }
}
如下例子：
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<%@ page import="java.util.*"%>
<%@ include file="..//System//ConstDefine.jsp"%>
<%@ include file="..//System//FunDefine.jsp"%>
<%@ include file="..//System//VarDefineList.jsp"%>
<jsp:useBean   id="dgoa" scope="request"  class="beartool.ClaincomPassFunction"/>
<%
String CC[][];//存放指定人员的所有菜单以及操作权限
int c=0;
String s2="";//获取被选中下拉列表值
s2=(String)request.getParameter("aa");
if(s2==null)
   {

CC=dgoa.GetPass(DBName,sysid,UserId);

    }
else
   {

CC=dgoa.GetPass(DBName,sysid,s2);

  }
String BB[][];//存放人员信息
BB=dgoa.GetSysEmployee(DBName,sysid);
int n=0;
int x=0;
int t=0;
%>
<%nAddButtonStyle = 0;
%><html>
<head>
<title></title>
<script  language='javascript'>//当选择人员编号后显示该人员已有的权限
function pass(){   var   m=document.Form1.select1.value;
//window.open('ClaincomPassAdmin.jsp?aa='+m,'_self','top=0,left=0,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,height='+ new String(screen.availHeight-28) + ',width=' + new String(screen.availWidth-10));
  window.location.href ='ClaincomPassAdmin.jsp?aa='+m;
}
function on_submit()
    {
    if(confirm("确认保存?"+document.Form1.select1.value)==true)
     {
document.Form1.submit();}

   }</script></head>
<body  class="QueryBar"><form method="post" action="../ClaincomPassUpdate" name="Form1">
<table>

<tr><td ><input  name="CHK" id="chk01" type="checkbox" value="01" onClick="javascript:selectcheckbox(1,8);" >01系统管理</td>
<td> </td>
<td> </td></tr>

<tr>
<td> </td>
<td><input  name="CHK" id="chk0101" type="checkbox" value="0101" onClick="javascript:selectcheckbox3(101,8);" >0101隐藏/显示导航栏</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0102" type="checkbox" value="0102" onClick="javascript:selectcheckbox3(102,8);" >0102口令修改</td><td> </td></tr>
<tr>
<td> </td>
<td><input  name="CHK" id="chk0103" type="checkbox" value="0103" onClick="javascript:selectcheckbox3(103,8);" >0103用户转换</td><td> </td></tr>
<tr>
<td> </td>
<td><input  name="CHK" id="chk0108" type="checkbox" value="0108" onClick="javascript:selectcheckbox3(108,8);" >0108用户新增</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0104" type="checkbox" value="0104" onClick="javascript:selectcheckbox3(104,8);" >0104权限管理</td><td> </td></tr>
<tr>
<td> </td>
<td><input  name="CHK" id="chk0105" type="checkbox" value="0105" onClick="javascript:selectcheckbox3(105,8);" >0105打印模版选择</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0106" type="checkbox" value="0106" onClick="javascript:selectcheckbox3(106,8);" >0106注销重登陆</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0107" type="checkbox" value="0107" onClick="javascript:selectcheckbox3(107,8);" >0107退出</td><td> </td></tr><div   id="a" class="dbl" ><tr><td ><input  name="CHK" id="chk02" type="checkbox" value="02" onClick="javascript:selectcheckbox(02,14);" >02基本资料</td>
<td> </td>
<td> </td></tr>

<tr>
<td> </td>
<td><input  name="CHK" id="chk0201" type="checkbox" value="0201" onClick="javascript:selectcheckbox3(201,14);" >0201公司资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0202" type="checkbox" value="0202" onClick="javascript:selectcheckbox3(202,14);" >0202部门资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0203" type="checkbox" value="0203" onClick="javascript:selectcheckbox3(203,14);" >0203员工资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0204" type="checkbox" value="0204" onClick="javascript:selectcheckbox3(204,14);" >0204仓库资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0205" type="checkbox" value="0205" onClick="javascript:selectcheckbox3(205,14);" >0205地区资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0206" type="checkbox" value="0206" onClick="javascript:selectcheckbox3(206,14);" >0206客户资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0207" type="checkbox" value="0207" onClick="javascript:selectcheckbox3(207,14);" >0207供应商资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0208" type="checkbox" value="0208" onClick="javascript:selectcheckbox3(208,14);" >0208货品单位</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0209" type="checkbox" value="0209" onClick="javascript:selectcheckbox3(209,14);" >0209现金银</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0210" type="checkbox" value="0210" onClick="javascript:selectcheckbox3(210,14);" >0210货品类别</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0211" type="checkbox" value="0211" onClick="javascript:selectcheckbox3(211,14);" >0211货品资料</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0212" type="checkbox" value="0212" onClick="javascript:selectcheckbox3(212,14);" >0212费用类别</td><td> </td></tr>
<tr>
<td> </td>
<td><input  name="CHK" id="chk0214" type="checkbox" value="0214" onClick="javascript:selectcheckbox3(214,14);" >0214供应商=客户</td><td> </td></tr><tr>
<td> </td>
<td><input  name="CHK" id="chk0213" type="checkbox" value="0213" onClick="javascript:selectcheckbox2(213,2);selectcheckbox3(213,14);" >0213报表</td><td> </td></tr><tr>
<td> </td><td> </td>
<td><input  name="CHK" id="chk021301" type="checkbox" value="021301" onClick="javascript:selectcheckbox4(21301,2);" >021301地区资料报表</td></tr><tr>
<td> </td><td> </td>
<td><input  name="CHK" id="chk021302" type="checkbox" value="021302" onClick="javascript:selectcheckbox4(21302,2);" >021302顾客资料报表</td>
</tr>

</div>

<tr>
<td colspan="2"></td>
</tr>
  <tr>
  <td height="114" colspan="8" align="center" nowrap >
<input type="button" name="ButtonSave" value="保         存" class="ButtonClass" onClick="javascript:on_submit()" >
 

    
</td>
  </tr>
</table>
</form>
<script>
function selectcheckbox(t,num)
{//一级菜单复选框

  try{         if(t<10)
   {t="0"+t;}
     if (document.all("chk"+t).checked == true)
   {for(var i =1;i<=num;i++)
      { var temp="01";
    if(i<10)
    {temp="0"+i;}
else
{temp=i;}
if(document.all("chk"+t+temp).checked==false)
{
  Form1.all("chk"+t+temp).click();
}
           //document.all("chk"+t+temp).checked=true;

      }
   }
  else
   {
for(var i =1;i<=num;i++)
      { var temp="01";
    if(i<10)
    {temp="0"+i;}
else
{temp=i;}
if(document.all("chk"+t+temp).checked==true)
{
  Form1.all("chk"+t+temp).click();
  }
            //document.all("chk"+t+temp).checked=false;
      }
   }

}
catch(e){
}
}
function selectcheckbox2(t,num)
{//二级菜单复选框有三级菜单的   try{

         if(t<1000)
   {t="0"+t;}
     if (document.all("chk"+t).checked == true)
   {for(var i =1;i<=num;i++)
      { var temp="01";
    if(i<10)
    {temp="0"+i;}
else
{temp=i;}
            document.all("chk"+t+temp).checked=true;
      }
   }
  else
   { for(var i =1;i<=num;i++)
      { var temp="01";
    if(i<10)
    {temp="0"+i;}
else
{temp=i;}
            document.all("chk"+t+temp).checked=false;
      }
   }

}
catch(e){
}
}
function selectcheckbox3(t,num)
{//二级菜单复选框  try{
           var yiji= Math.round(t/100);
if(yiji<10)
   {yiji="0"+yiji;}
         if(t<1000)
   {t="0"+t;}
     if (document.all("chk"+t).checked == true)
   {
            document.all("chk"+yiji).checked=true;

   }
  else
   { var n=0;
for(var i =1;i<=num;i++)
      { var temp="01";
    if(i<10)
    {temp="0"+i;}
else
{temp=i;}

if(document.all("chk"+yiji+temp).checked==true)
{n++;}

      }
if(n==0)
{
             document.all("chk"+yiji).checked=false;
}
   }

}
catch(e){
}
}
function selectcheckbox4(t,num)
{//三级菜单复选框  try{
         var erji= Math.round(t/100);
var yiji= Math.round(erji/100);
if(yiji<10)
   {yiji="0"+yiji;}
if(erji<1000)
   {erji="0"+erji;}
         if(t<100000)
   {t="0"+t;}
     if (document.all("chk"+t).checked == true)
   {    document.all("chk"+erji).checked=true ;
        document.all("chk"+yiji).checked=true ;
            //Form1.all("chk"+erji).click();

   }
  else
   { var n=0;
for(var i =1;i<=num;i++)
      { var temp="01";
    if(i<10)
    {temp="0"+i;}
else
{temp=i;}

if(document.all("chk"+erji+temp).checked==true)
{n++;}

      }
if(n==0)
{
             Form1.all("chk"+erji).click();
}
   }

}
catch(e){
}
}
</script><script language="javascript">
<%
if(CC.length!=0){
n=0;
while(n<CC.length)
   {
%>
document.all("chk<%=CC[n][0]%>").checked=true ;
<%n++;}}%>
</script></body>
</html>

调试易

JS级联的复选框，菜鸟急求！

解决方案 »