📄 checktree.html

📁 通过css+js实现树形结构

💻 HTML

字号:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>带复选框的树形结构</title>

 <link rel="stylesheet" type="text/css" href="checktree.css" />
 <script type="text/javascript" src="checktree.js"></script>
 <script type="text/javascript">
 
 var checkmenu = new CheckTree('checkmenu');
</script>

</head>
<body style="font: 0.8em/1.6 sans-serif; background-color: #FFF">

<form action="javascript:void(0)">

<ul id="tree-checkmenu" class="checktree">
 <li id="show-explorer">
  <input id="check-explorer" type="checkbox" />
  第一级节点1<span id="count-explorer" class="count"></span>
  <ul id="tree-explorer">
   <li id="show-iemac">
    <input id="check-iemac" type="checkbox" />
   第二级节点11
    <span id="count-iemac" class="count"></span>
    <ul id="tree-iemac">
     <li><input type="checkbox" />
     第三级节点111</li>
     <li class="last"><input type="checkbox" />
     第三级节点112</li>
    </ul>
   </li>
   
  <li id="show-iewin" class="last">
    <input id="check-iewin" type="checkbox" />
    第二级节点12
    <ul id="tree-iewin">
     <li><input type="checkbox" />
       第三级节点121</li>
     <li><input type="checkbox" />
      第三级节点122</li>
     </ul>
   </li>
  </ul>
 </li>
 
 <li id="show-netscape">
  <input id="check-netscape" type="checkbox" />
  第一级节点2<span id="count-netscape" class="count"></span>
  <ul id="tree-netscape">
   <li><input type="checkbox" />
     第二级节点21</li>
   <li><input type="checkbox" />
     第二级节点24</li>
   <li id="show-mozilla" class="last">
    <input id="check-mozilla" type="checkbox" />
    第二级节点25
    <ul id="tree-mozilla">
     <li><input type="checkbox" />
       第三级节点251</li>     
     </ul>
   </li>
  </ul>
 </li>
 <li class="last" id="check-explorer">
  <input id="check-opera" type="checkbox" />
  第一级节点4</li>
 </ul>
</form>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -