用Checkbox手写两层的树组件

下面是一个简单的例子，实现了一个基本的两层树形结构的 Checkbox 组件:

<div id="tree">
  <ul>
    <li>
      <input type="checkbox" id="node1">
      <label for="node1">Node 1</label>
      <ul>
        <li>
          <input type="checkbox" id="subnode1">
          <label for="subnode1">Subnode 1</label>
        </li>
        <li>
          <input type="checkbox" id="subnode2">
          <label for="subnode2">Subnode 2</label>
        </li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="node2">
      <label for="node2">Node 2</label>
      <ul>
        <li>
          <input type="checkbox" id="subnode3">
          <label for="subnode3">Subnode 3</label>
        </li>
        <li>
          <input type="checkbox" id="subnode4">
          <label for="subnode4">Subnode 4</label>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS 样式可以根据需要自行修改。这里只提供一个基本的样式：

#tree ul,
#tree li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#tree li {
  margin-top: 5px;
  position: relative;
}

#tree li input[type="checkbox"] {
  position: absolute;
  left: -20px;
  top: 2px;
}

#tree li label {
  display: block;
  padding-left: 20px;
  cursor: pointer;
}

#tree li label:hover {
  background-color: #f0f0f0;
}

这个例子中的树形结构比较简单，只有两层。如果需要更多层次的树形结构，可以通过递归方式来实现。