Javascript 更改选中输入上标签的背景图像

我使用中的代码构建了一个CSS可折叠树结构。我做了一些更改以删除“+”和“-”图像，因为这会导致格式混乱，并决定使用另一个文件夹图像（打开的）显示树的展开部分

我尝试使用~selector在CSS中执行此操作，但它不起作用，因为标签就在其关联输入之前。我无法切换它，因为这样树就不会像预期的那样展开/收缩

我正在探索使用Javascript的可能性，但是因为我有大约300个标签复选框对，所以使用getElementbyID来获得我试图修复的确切标签似乎是不可行的。有没有更简单的方法

HTML代码：

<ol class="tree">
   <li>
      <label for="CB1">Label1</label><input type="checkbox" id="CB1" />
      <ol>
         <li class="file">File 1</li>
         <li class="file">File 2</li>
         <li class="file">File 3</li>
      </ol>
   </li>
</ol>

ol.tree li.file a
    {
        background: url(../images/document.png) 0 0 no-repeat;
        color: #2D629A;
        padding-left: 21px;
        text-decoration: none;
        display: block;
    }
ol.tree li input
{
    position: absolute;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0;
}
ol.tree li label
{
    background: url(../images/folder-horizontal.png) 15px 1px no-repeat;
    cursor: pointer;
    display: block;
    padding-left: 37px;
}

ol.tree li input:checked ~ label
{
    background: url(../images/folder-open.png) 40px 5px no-repeat;
}

首先，

元素位于错误的位置。
它必须在标签之前，才能工作

其次，要使其正常工作，需要将

设置为隐藏，然后在选中

时显示它

生成的html：

<ol class="tree">
   <li>
      <input type="checkbox" id="CB1" /><label for="CB1">Label1</label>
      <ol>
         <li class="file">File 1</li>
         <li class="file">File 2</li>
         <li class="file">File 3</li>
      </ol>
   </li>
</ol>

请在此处查看它的实际操作：

注意：

---

我没有触及图像：我保持了相同的路径，没有更改代码中的任何其他内容。

您可以通过交换图像并使用css规则中的

+

（兄弟姐妹）来实现这一点，css规则为我修复了它。谢谢大家!@迪什考夫：不客气。我做过一个项目，我必须做一些类似的事情。您可以使用此代码创建CSS3菜单（至少是移动菜单）。

ol.tree ol 
{
    display:none;
}
ol.tree li.file a
{
    background: url(../images/document.png) 0 0 no-repeat;
    color: #2D629A;
    padding-left: 21px;
    text-decoration: none;
    display: block;
}
ol.tree li input
{
    position: absolute;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    height: 1em;
    width: 1em;
    top: 0;
}
ol.tree li label
{
    background: url(../images/folder-horizontal.png) 15px 1px no-repeat;
    cursor: pointer;
    display: block;
    padding-left: 37px;
}

ol.tree li input:checked ~ label
{
    background: url(../images/folder-open.png) 40px 5px no-repeat;
}

ol.tree li input:checked ~ ol
{
    display:block;
}