Aquí hay un violín que (parcialmente) tengo que trabajar con el selector de consultas. http://jsfiddle.net/03rc2j91/ Solo oculta el primer elemento como debería. Pero necesito ocultar todos los elementos con la misma clase.
Estoy trabajando en un proyecto en el que necesito apuntar a la misma clase para ocultar todas las imágenes dentro de esa clase.
Intenté usar querySelectorAll pero no funcionó. Mismo problema con getElementsByClassName()
Queryselector es el único que tengo para trabajar, pero no es suficiente para ocultar solo el primer elemento.
Su ayuda sería muy apreciada, ¡Gracias!
function toggleBoxVisibility() { if (document.querySelector(".check").checked == true) { document.querySelector(".box").style.opacity = '0'; } else { document.querySelector(".box").style.opacity = '1'; } }Document.querySelectorAll() devuelve una NodeList , que puede considerar como una matriz de elementos. Para ocultar cada uno de ellos, debe recorrer la lista y ocultar cada elemento individualmente.
Lea más sobre Document.querySelectorAll() : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
function toggleBoxVisibility() { if (document.querySelector(".check").checked) { document.querySelectorAll(".box").forEach(box => { box.style.opacity = '0'; }); } else { document.querySelectorAll(".box").forEach(box => { box.style.opacity = '1'; }); } } .box { background: lightblue; width: 200px; height: 200px; display: inline-block; } <input type="checkbox" class="check" onclick="toggleBoxVisibility()"> <div class="box"></div> <div class="box"></div> <div class="box"></div>