网站首页/技术开发列表/内容

CheckBox分级选中

技术开发2020-12-13阅读

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>CheckBox</title>
<script language=javascript defer>
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<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].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<CheckBoxNum;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<SubNodeLength;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);}
</script>
</head><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>

……

相关阅读