如何在页面内的复选框列表上触发 .click() 事件？

Question

问题：我下面的代码导致所有复选框都被单击（不仅仅是那些具有匹配标签/textContent 的复选框）并且标签本身被更改为 text.Content 我在if 语句..

我想做的是创建一个函数（小书签），它允许我输入要匹配的标签的文本，然后它将找到所有具有相同标签的复选框并选中该复选框。

到目前为止，我一直停留在 dom 操作上：

var thecollection = document.getElementById("containerELementAlwaysHasThisID").querySelectorAll("label");

for(var i=0; i < thecollection.length; i++) {
  if(thecollection[i].querySelector("span.LabelAlwaysHasThisClassName").textContent = "Menus") {
      thecollection[i].querySelector("input.inputAlwaysHasThisClassName").click();
  }
}

HTML结构：

<div id="containerELementAlwaysHasThisID">
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
            <li><<label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label>/li>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
          </ul>
        </li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
      </ul>
    </li>
    <li>
      <ul>
      <li>
          <ul>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
          </ul>
        </li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
      </ul>
    </li>
    <li>
      <ul>
      <li>
          <ul>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
            <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
          </ul>
        </li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
        <li><label><input class="LabelAlwaysHasThisClassName"><span class="inputAlwaysHasThisClassName"></span></label></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

将 if 语句中的赋值运算符更新为比较 == 或 === 修复脚本：


for(var i=0; i < thecollection.length; i++) {
  if(thecollection[i].querySelector("span.LabelAlwaysHasThisClassName").textContent == "Menus") {
      thecollection[i].querySelector("input.inputAlwaysHasThisClassName").click();
  }
}```

如何在页面内的复选框列表上触发 .click() 事件？

How to trigger .click() event on a list of checkboxes within a page?

html

javascript

dom

dom-events