javascript - .checked = true 或 setAttribute ("checked"、 "checked") 未附加

Question

我需要使用CSS“checkbox-hack”来实现滑动菜单指示器效果，我唯一的方法是通过JavaScript附加输入元素。我被迫通过在线工具 MonoSolutions 来完成此操作，并且我受到许多元素和属性的限制，这些元素和属性是在我的控制之外自动设置的，否则我会手动将其添加到 DOM 中。无论如何:

这就是我所拥有的:

window.onload = function AddCheckbox() {
  var listitem = document.getElementsByTagName("li");
  for(i = 0; i < listitem.length; i++) {
    var checkbox = document.createElement("input");
    checkbox.type = "radio";
    checkbox.name = "slide-item";
    checkbox.className = "slide-toggle";
    checkbox.id = "menu-item-" + [i+1];
    if(listitem[i].className == " active")
    {
      checkbox.checked = true;
    }
    document.getElementsByTagName("li")[i].appendChild(checkbox);
  }
}

此函数中的所有内容都运行良好除了 if 语句将复选框默认状态设置为 checked我不明白为什么这部分没有附加到“事件”li 元素下的复选框。

我尝试过替代方案checkbox.setAttribute("checked", "checked");没有运气。我尝试了另一种方法 var activeClass = document.querySelector("li");并将其与 if(activeClass[i].classList.contains("active")) 一起使用但什么也没有...

如aria-current="page"由编辑添加我想我也可以尝试 if(listitem[i].ariaCurrent == "page")但这也行不通。

请注意，我无法控制 li 类名称的设置方式。在线工具集<li class tabindex="0">在非事件菜单项上(根本没有类名，只是一个空属性)并设置 <li class=" active" tabindex="0" aria-current="page">对于事件菜单项。由于某些愚蠢的原因，它在前面添加了一个空格( class=" active" )。我不知道这是否会影响任何事情，但将事件 li 类下的复选框默认为选中的最后一个小重要细节不适用于我的任何方法。

我搜索过的所有稍微相似的帖子并没有真正回答我的问题。我在这里缺少什么？!

Answer 1

if(listitem[i].className == "active") 很容易被破坏(active 之前没有空格，后面有空格，在其之前或之后有任何其他类(class))。相反，请考虑:

if (listitem[i].classList.contains("active"))

classList.contains 查看元素是否具有给定的类，无论它可能具有任何其他类，或者类名之前或之后是否有空格。

---

另外，请注意，由于您的输入是type="radio"1并且具有名称，因此只有最后 你所做的 checked = true 将会保留它，因为一个共同的 name 将它们放在一组中，并且在任何给定的位置只能选中一个单选按钮时间。

(我们通常将这些称为“单选按钮”，而不是“复选框；”复选框是 type="checkbox")