checkbox分級操作(不同名)

<title>CheckBox</title>
<script language=javascript defer>
var n=document.getElementsByTagName("INPUT");
var CheckBoxNum=n.length;
var SubNodeCheckSome,SameNodeCheckSome,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;     //初始化同級結點被選中的數目
  SubNodeCheckSome=0;     //初始化子結點半選數目
  SameNodeCheckSome=0;     //初始化同級結點半選數目
  ParentNodeName=FindParentNode(NodeName);  //取得上級結點名
  SearchParentNodeName=NodeName;   //當前結點名
  d=NodeName.lastIndexOf("_");    //判斷是否存在上級結點
  if(d!=-1)SearchParentNodeName=SearchParentNodeName.substring(0,d);//如果存在上級結點,取得上級結點名
  for(i=0;i<CheckBoxNum;i++)
  {
    if(n[i].name.length==NodeName.length&&ParentNodeName==FindParentNode(n[i].name))
    {
      SameNodeNum+=1;     //同級結點數目加一
      if(n[i].checked)SameNodeCheckedNum+=1;  //同級結點被選中的數目加一
      if(n[i].indeterminate)SameNodeCheckSome+=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(n[i].indeterminate)SubNodeCheckSome+=1; //子結點半選數目加一
    }
  }

  if((SameNodeNum==1||SameNodeCheckedNum==0)&&(SubNodeCheckedNum==0)&&!document.all(NodeName).checked)
    SubNodeCheckedTF=true;    //判斷子結點是否被選中
  if((SameNodeNum>=0&&SameNodeCheckedNum<SameNodeNum)||SameNodeCheckSome>0||SubNodeCheckSome>0)
    document.all(SearchParentNodeName).indeterminate=true;//將上級選中狀態改爲半選
  if((SameNodeCheckedNum==SameNodeNum||SameNodeCheckedNum==0)&&SubNodeCheckSome==0&&SameNodeCheckSome==0)
    document.all(SearchParentNodeName).indeterminate=false;//取消上級半選狀態
  return SearchParentNodeName;
}

function CheckAll(BoxName)
{
  SearchNodeName=BoxName;
  SearchParentNodeName=BoxName;
  SubNodeLength=BoxName.split("_").length;
  for(i=0;i<CheckBoxNum;i++)
  {
    if(n[i].name.substring(0,BoxName.length)==BoxName&&n[i].name!=BoxName&&n[i].type=="checkbox")
    {
      n[i].indeterminate=false;    //取消半選狀態
      n[i].checked=document.all(BoxName).checked?true:false;//選中所有子結點
    }
  }
  for(j=1;j<SubNodeLength;j++)
  {
    document.all(CheckSubNode(SearchParentNodeName)).checked=SubNodeCheckedTF?false:true;//如果有子結點被選中,則選中上級結點,返之取消
  }
}

document.οnclick=function(){if(event.srcElement.type=="checkbox")CheckAll(event.srcElement.name);}
</script><body >
<form name="f1" >
<input type="checkbox" name="bid"><br>
 <input type="checkbox" name="bid_01"><br>
  <input type="checkbox" name="bid_01_01"><br>
  <input type="checkbox" name="bid_01_02"><br>
   <input type="checkbox" name="bid_01_02_01"><br>
   <input type="checkbox" name="bid_01_02_02"><br>
    <input type="checkbox" name="bid_01_02_02_01"><br>
    <input type="checkbox" name="bid_01_02_02_02"><br>
    <input type="checkbox" name="bid_01_02_02_03"><br>
     <input type="checkbox" name="bid_01_02_02_03_01"><br>
     <input type="checkbox" name="bid_01_02_02_03_02"><br>
     <input type="checkbox" name="bid_01_02_02_03_03"><br>
    <input type="checkbox" name="bid_01_02_02_04"><br>
   <input type="checkbox" name="bid_01_02_03"><br>
  <input type="checkbox" name="bid_01_03"><br>
  <input type="checkbox" name="bid_01_04"><br>
 <input type="checkbox" name="bid_02"><br>
 <input type="checkbox" name="bid_03"><br>
 <input type="checkbox" name="bid_04"><br>
<hr>
<input type="checkbox" name="ent" checkmain ><br>
 <input type="checkbox" name="ent_01"><br>
  <input type="checkbox" name="ent_01_01"><br>
 <input type="checkbox" name="ent_02"><br>
 <input type="checkbox" name="ent_03"><br>
 <input type="checkbox" name="ent_04"><br>
</form>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章