实现CheckBox分级选中的经典代码-js checkbox选中和不选中

本文列出了CheckBox分级选中的代码，代码很复杂，需要大家仔细研究一番，不过您若是明白了这部分代码，那实现CheckBox分级选中绝不是问题。
CheckBox分级选中的实现方法如下：
  
  
"Content-Language" content="zh-cn">  
"Content-Type" content="text/html; charset=gb2312">  
"GENERATOR" content="Microsoft FrontPage 4.0">  
"ProgId" content="FrontPage.Editor.Document">  
CheckBox  
  
var n=document.getElementsByTagName("INPUT");  
var CheckBoxNum=n.length;  
var tf,SearchNodeName,SearchParentNodeName,SameNodeNum,
SubNodeCheckedNum,SameNodeCheckedNum,SubNodeNum,SubNodeCheckedTF;   
function FindParentNode(SubNodeName)    //获取上级结点名，并判断是否被选中  
{  
  tf=false;                //初始化选中状态  
  SearchNodeName=SubNodeName;  
  t=SubNodeName.lastIndexOf("_");    //判断是否存在上级结点  
  if(t!=-1)SearchNodeName=SubNodeName.substring(0,t);//如果存在上级结点，取得上级结点名  
  if(document.all(SubNodeName).checked)tf=true;//判断结点是否被选中  
  return SearchNodeName;  
}   
function CheckSubNode(NodeName)    //获取结点名，并判断子结点是否选中  
{  
  SubNodeCheckedTF=false;    //初始化子结点选中状态  
  SubNodeNum=0;            //初始化子结点数目  
  SameNodeNum=0;        //初始化同级结点数目  
  SubNodeCheckedNum=0;        //初始化子结点被选中的数目  
  SameNodeCheckedNum=0;        //初始化同级结点被选中的数目  
  ParentNodeName=FindParentNode(NodeName);//上级结点名  
  SearchParentNodeName=NodeName;//当前结点名  
  d=NodeName.lastIndexOf("_");    //判断是否存在上级结点  
  if(d!=-1)SearchParentNodeName=SearchParentNodeName.substring(0,d);//如果存在上级结点，取得上级结点名  
  for(i=0;i
  {  
    if(n[i].name.length==NodeName.length&&ParentNodeName==FindParentNode(n[i].name)) 字串3   
    {  
      SameNodeNum+=1;        //同级结点数目加一  
      if(n[i].checked)SameNodeCheckedNum+=1;//同级结点被选中的数目加一  
    }   
if(n[i].name.substring(0,NodeName.length)==NodeName&&n[i].name!=NodeName&&n[i].type=="checkbox")  
    {  
      SubNodeNum+=1;        //子结点数数目加一  
      if(n[i].checked)SubNodeCheckedNum+=1;//子结点被选中的数目加一  
    }  
  }   
 if((SameNodeNum==1||SameNodeCheckedNum==0)&&(SubNodeCheckedNum==0)&&!document.all(NodeName).checked)  
  {  
      SubNodeCheckedTF=true;    //判断子结点是否被选中  
  }  
  return SearchParentNodeName;  
}   
function CheckAll(BoxName)  
{  
  SearchNodeName=BoxName;  
  SearchParentNodeName=BoxName  
  SubNodeLength=BoxName.split("_").length;   
  for(i=0;i
  {  
    if(n[i].name.substring(0,BoxName.length)==BoxName&&n[i].name!=BoxName&&n[i].type=="checkbox")  
    n[i].checked=document.all(BoxName).checked?true:false;    //选中所有子结点  
  }   
  for(j=1;j
  {  
    document.all(FindParentNode(SearchNodeName)).checked=tf?true:false;  
    document.all(CheckSubNode(SearchParentNodeName)).checked=SubNodeCheckedTF?false:true;  
  }   
}document.onclick=function(){if(event.srcElement.type=="checkbox")CheckAll(event.srcElement.name);}  
  
  
  
"f1" >  
"checkbox" name="bid">
  
　"checkbox" name="bid_01">
  
　　"checkbox" name="bid_01_01">
  
　　"checkbox" name="bid_01_02">
  
　　　"checkbox" name="bid_01_02_01">
  
　　　"checkbox" name="bid_01_02_02">
  
　　　　"checkbox" name="bid_01_02_02_01">
  
　　　　"checkbox" name="bid_01_02_02_02">
  
　　　　"checkbox" name="bid_01_02_02_03">
  
　　　　　"checkbox" name="bid_01_02_02_03_01">
  
　　　　　"checkbox" name="bid_01_02_02_03_02">
  
　　　　　"checkbox" name="bid_01_02_02_03_03">
  
　　　　"checkbox" name="bid_01_02_02_04">
  
　　　"checkbox" name="bid_01_02_03">
 　　
"checkbox" name="bid_01_03">
  
　　"checkbox" name="bid_01_04">
  
　"checkbox" name="bid_02">
  
　"checkbox" name="bid_03">
  
　"checkbox" name="bid_04">
  
  
"checkbox" name="ent" checkmain >
  
　"checkbox" name="ent_01">
  
　　"checkbox" name="ent_01_01">
  
　"checkbox" name="ent_02">
  
　"checkbox" name="ent_03">
  
　"checkbox" name="ent_04">
以上就是实现CheckBox分级选中的方法，希望能给大家带来帮助。
【编辑推荐】