Question

所以我试图用一个复选框隐藏多个html元素。

隐藏一个元素就像一个魅力，但只要我有两个，它只隐藏第一个匹配的元素。

快速演示我想要做的事情：

复选框： <input type="checkbox" id="kaartCheck" onclick="kliendikaartF()">

我能够展示的元素：

<p id="kliendi_kaart_olemas_p" style="display:none">Kliendikaart on olemas!</p>

和我无法展示的元素:(基本上与第一个相同

<p id="kliendi_kaart_olemas_p" style="display:none">Second element shoult apear</p>

和js我正在使用的是：

function kliendikaartF() {
  var checkBox = document.getElementById("kaartCheck");
  var text = document.getElementById("kliendi_kaart_olemas_p");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

长话短说，我有多个元素，我想隐藏一下，我会给他们所有相同的ID：kliendi_kaart_olemas_p并用一个复选框显示/隐藏它们。

Answer 1

document.getElementById只会返回与该id匹配的第一个元素。如果要选择所有ID或类，请使用document.querySelector('#idhere')

Answer 2

在此处使用类名称kliendi_kaart_olemas_p beacuse您已创建id和id是整个页面中项目的唯一名称。如果您获取id并修改该元素它将仅更新首先找到的元素。

<p class="kliendi_kaart_olemas_p" style="display:none">Kliendikaart on olemas!/p>

和

<p class="kliendi_kaart_olemas_p" style="display:none">Kliendikaart on olemas!/p>

然后启动你的varibale，如

var text = document.getElementsByClassName("kliendi_kaart_olemas_p");

您的问题将得到解决

Answer 3

我认为你必须使用querySelectorAll()方法来按属性选择所有元素。这将返回与属性及其值匹配的所有元素的数组。然后你必须在for循环中逐个迭代。

function kliendikaartF() {
  var checkBox = document.getElementById("kaartCheck");
  var allElements= document.querySelectorAll('[id="kliendi_kaart_olemas_p"]');
  var new_display_value="none";
  if (checkBox.checked == true){
    new_display_value = "block";
  }
  for(i=0;i<allElements.length;i++){
     allElements[i].style.display=new_display_value;
  }
}

JavaScript - 使用一个复选框隐藏多个元素（具有相同的ID）

3 个答案: