document.getElementById("") 中有更多相同的 ID

Question

我有 html 个包含 157 个 ID 的文件

id="name"

我需要通过单击 一个复选框 将样式属性 "display" 从 "none" 更改为 "block" 我有这个脚本：

function nms(){
      if (document.getElementById("name").style.display === 'block') document.getElementById("name").style.display = 'none';
      else {document.getElementById("name").style.display === 'block';}}

在每个中更改此属性 id。

我需要在每个而不是第一个 id 上更改它。我刚找到这个：

$("[id=yourID]").

我需要为我的复选框实现该代码，onclick 函数在第一次点击显示时执行：阻止，在第二次显示时执行：none。

但它对我不起作用，我不能使用 document.getElementByClassName 因为我需要更改显示属性.

谢谢你的帮助，我不知道怎么做运行 :-(

Answer 1

而不是 id 您可能想使用其他一些属性。在所有 HTML 元素上通用的 class 将是一个好主意。如果您的标记如下所示

<div class="name abc"></div>
<div class="name xyz"></div>
<div class="name pqr"></div>
<div class="name hjk"></div>

然后你可以编写javascript代码来为所有这些设置display:block，如下所示

var elements = document.getElementsByClassName("name");
if (elements != null) {
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].style.display === "block") {
            elements[i].style.display = "none";
        } else {
            elements[i].style.display = "block";
        }
    }
}

注意： 在 HTML 中，多个 DOM 元素具有相同的 ID 是无效的

编辑： 添加了如果签入循环允许切换

Answer 2

为什么您认为您不能使用 getElementsByClassName？ display 属性的更改与 select 元素的更改方式无关。

document.getElementById("") 中有更多相同的 ID

More same id´s in document.getElementById("")

html

javascript

checkbox

getelementbyid

getelementsbyclassname