实现CheckBox分级选中的经典代码

本文列出了CheckBox分级选中的代码，代码很复杂，需要大家仔细研究一番，不过您若是明白了这部分代码，那实现CheckBox分级选中绝不是问题。

成都创新互联公司专业为企业提供汉源网站建设、汉源做网站、汉源网站设计、汉源网站制作等企业网站建设、网页设计与制作、汉源企业网站模板建站服务，十多年汉源做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

CheckBox分级选中的实现方法如下：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  "Content-Language" content="zh-cn">   
    4. 
  
  
  
  4.  "Content-Type" content="text/html; charset=gb2312">   
    5. 
  
  
  
  5.  "GENERATOR" content="Microsoft FrontPage 4.0">   
    6. 
  
  
  
  6.  "ProgId" content="FrontPage.Editor.Document">   
    7. 
  
  
  
  7. CheckBox 
    8. 
  
  
  
  8.    
    9. 
  
  
  
  9. var n=document.getElementsByTagName("INPUT"); 
    10. 
  
  
  
  10. var CheckBoxNum=n.length; 
    11. 
  
  
  
  11. var tf,SearchNodeName,SearchParentNodeName,SameNodeNum,
    SubNodeCheckedNum,SameNodeCheckedNum,SubNodeNum,SubNodeCheckedTF;  
    12. 
  
  
  
  12. function FindParentNode(SubNodeName)    //获取上级结点名，并判断是否被选中 
    13. 
  
  
  
  13. { 
    14. 
  
  
  
  14.   tf=false;                //初始化选中状态 
    15. 
  
  
  
  15.   SearchNodeName=SubNodeName; 
    16. 
  
  
  
  16.   t=SubNodeName.lastIndexOf("_");    //判断是否存在上级结点 
    17. 
  
  
  
  17.   if(t!=-1)SearchNodeName=SubNodeName.substring(0,t);//如果存在上级结点，取得上级结点名 
    18. 
  
  
  
  18.   if(document.all(SubNodeName).checked)tf=true;//判断结点是否被选中 
    19. 
  
  
  
  19.   return SearchNodeName; 
    20. 
  
  
  
  20. }  
    21. 
  
  
  
  21. function CheckSubNode(NodeName)    //获取结点名，并判断子结点是否选中 
    22. 
  
  
  
  22. { 
    23. 
  
  
  
  23.   SubNodeCheckedTF=false;    //初始化子结点选中状态 
    24. 
  
  
  
  24.   SubNodeNum=0;            //初始化子结点数目 
    25. 
  
  
  
  25.   SameNodeNum=0;        //初始化同级结点数目 
    26. 
  
  
  
  26.   SubNodeCheckedNum=0;        //初始化子结点被选中的数目 
    27. 
  
  
  
  27.   SameNodeCheckedNum=0;        //初始化同级结点被选中的数目 
    28. 
  
  
  
  28.   ParentNodeName=FindParentNode(NodeName);//上级结点名 
    29. 
  
  
  
  29.   SearchParentNodeName=NodeName;//当前结点名 
    30. 
  
  
  
  30.   d=NodeName.lastIndexOf("_");    //判断是否存在上级结点 
    31. 
  
  
  
  31.   if(d!=-1)SearchParentNodeName=SearchParentNodeName.substring(0,d);//如果存在上级结点，取得上级结点名 
    32. 
  
  
  
  32.   for(i=0;i 
    33. 
  
  
  
  33.   { 
    34. 
  
  
  
  34.     if(n[i].name.length==NodeName.length&&ParentNodeName==FindParentNode(n[i].name)) 字串3  
    35. 
  
  
  
  35.     { 
    36. 
  
  
  
  36.       SameNodeNum+=1;        //同级结点数目加一 
    37. 
  
  
  
  37.       if(n[i].checked)SameNodeCheckedNum+=1;//同级结点被选中的数目加一 
    38. 
  
  
  
  38.     }  
    39. 
  
  
  
  39. if(n[i].name.substring(0,NodeName.length)==NodeName&&n[i].name!=NodeName&&n[i].type=="checkbox") 
    40. 
  
  
  
  40.     { 
    41. 
  
  
  
  41.       SubNodeNum+=1;        //子结点数数目加一 
    42. 
  
  
  
  42.       if(n[i].checked)SubNodeCheckedNum+=1;//子结点被选中的数目加一 
    43. 
  
  
  
  43.     } 
    44. 
  
  
  
  44.   }  
    45. 
  
  
  
  45.  if((SameNodeNum==1||SameNodeCheckedNum==0)&&(SubNodeCheckedNum==0)&&!document.all(NodeName).checked) 
    46. 
  
  
  
  46.   { 
    47. 
  
  
  
  47.       SubNodeCheckedTF=true;    //判断子结点是否被选中 
    48. 
  
  
  
  48.   } 
    49. 
  
  
  
  49.   return SearchParentNodeName; 
    50. 
  
  
  
  50. }  
    51. 
  
  
  
  51. function CheckAll(BoxName) 
    52. 
  
  
  
  52. { 
    53. 
  
  
  
  53.   SearchNodeName=BoxName; 
    54. 
  
  
  
  54.   SearchParentNodeName=BoxName 
    55. 
  
  
  
  55.   SubNodeLength=BoxName.split("_").length;  
    56. 
  
  
  
  56.   for(i=0;i 
    57. 
  
  
  
  57.   { 
    58. 
  
  
  
  58.     if(n[i].name.substring(0,BoxName.length)==BoxName&&n[i].name!=BoxName&&n[i].type=="checkbox") 
    59. 
  
  
  
  59.     n[i].checked=document.all(BoxName).checked?true:false;    //选中所有子结点 
    60. 
  
  
  
  60.   }  
    61. 
  
  
  
  61.   for(j=1;j 
    62. 
  
  
  
  62.   { 
    63. 
  
  
  
  63.     document.all(FindParentNode(SearchNodeName)).checked=tf?true:false; 
    64. 
  
  
  
  64.     document.all(CheckSubNode(SearchParentNodeName)).checked=SubNodeCheckedTF?false:true; 
    65. 
  
  
  
  65.   }  
    66. 
  
  
  
  66. }document.onclick=function(){if(event.srcElement.type=="checkbox")CheckAll(event.srcElement.name);} 
    67. 
  
  
  
  67.  
    68. 
  
  
  
  68.  
    69. 
  
  
  
  69.    
    70. 
  
  
  
  70.  "f1" >   
    71. 
  
  
  
  71.  "checkbox" name="bid">
       
    72. 
  
  
  
  72. 　 "checkbox" name="bid_01">
       
    73. 
  
  
  
  73. 　　 "checkbox" name="bid_01_01">
       
    74. 
  
  
  
  74. 　　 "checkbox" name="bid_01_02">
       
    75. 
  
  
  
  75. 　　　 "checkbox" name="bid_01_02_01">
       
    76. 
  
  
  
  76. 　　　 "checkbox" name="bid_01_02_02">
       
    77. 
  
  
  
  77. 　　　　 "checkbox" name="bid_01_02_02_01">
       
    78. 
  
  
  
  78. 　　　　 "checkbox" name="bid_01_02_02_02">
       
    79. 
  
  
  
  79. 　　　　 "checkbox" name="bid_01_02_02_03">
       
    80. 
  
  
  
  80. 　　　　　 "checkbox" name="bid_01_02_02_03_01">
       
    81. 
  
  
  
  81. 　　　　　 "checkbox" name="bid_01_02_02_03_02">
       
    82. 
  
  
  
  82. 　　　　　 "checkbox" name="bid_01_02_02_03_03">
       
    83. 
  
  
  
  83. 　　　　 "checkbox" name="bid_01_02_02_04">
       
    84. 
  
  
  
  84. 　　　 "checkbox" name="bid_01_02_03">
     　　
     "checkbox" name="bid_01_03">
        
    85. 
  
  
  
  85. 　　 "checkbox" name="bid_01_04">
       
    86. 
  
  
  
  86. 　 "checkbox" name="bid_02">
       
    87. 
  
  
  
  87. 　 "checkbox" name="bid_03">
       
    88. 
  
  
  
  88. 　 "checkbox" name="bid_04">
       
    89. 
  
  
  
  89.  
    
     
    90. 
  
  
  
  90.  "checkbox" name="ent" checkmain >
       
    91. 
  
  
  
  91. 　 "checkbox" name="ent_01">
       
    92. 
  
  
  
  92. 　　 "checkbox" name="ent_01_01">
       
    93. 
  
  
  
  93. 　 "checkbox" name="ent_02">
       
    94. 
  
  
  
  94. 　 "checkbox" name="ent_03">
       
    95. 
  
  
  
  95. 　 "checkbox" name="ent_04">
       
    96. 
  
  
  
  96.

以上就是实现CheckBox分级选中的方法，希望能给大家带来帮助。

网页题目：实现CheckBox分级选中的经典代码
网页地址：http://www.mswzjz.cn/qtweb/news34/287334.html

温江区贝锐智能技术服务部_成都网站建设公司，为您提供小程序开发、ChatGPT、网站设计公司、面包屑导航、静态网站、App设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

网站建设知识

分类信息网

成都翻译公司　　 　seo优化排名　　 　网络推广公司　　 　邛崃网站建设　　 　成都移动机房　　 　东电技服　　 　金融行业网站建设方案　　 　全网营销推广　　 　手机网站制作　　 　重庆app软件开发　　 　bgp机房托管　　 　成都展柜厂　　 　德阳服务器托管　　 　重庆电信回兴机房　　 　成都网站制作　　 　广安网站建设　　 　美美搬家　　 　宜宾冠赛网站　　 　3D立体画　　 　护栏钻孔机