0
380
VisualizaçõesJs: ¿Función que oculta Divs según una matriz?
Tengo divs ('elementos') con casillas de verificación dentro de cada uno. ¿Cómo puedo ocultar los elementos que no tienen las casillas de verificación con los valores seleccionados marcados?
<div class='item'> <input type='checkbox' value='green' checked></input> <input type='checkbox' value='red'></input> </div> <div class='item'> <input type='checkbox' value='yellow'></input> <input type='checkbox' value='orange'></input> </div> function MyFunction () { const values = ['green', 'red']; let items = document.querySelectorAll('.item'); items.forEach(items => { if (values.every(values => items.querySelectorAll('input[type="checkbox"]:checked')[0].value.includes(values) // working (only for the first checked checkbox) items.querySelectorAll('input[type="checkbox"]:checked').forEach((cb, i) => // not working cb[i].value.includes(values) ) )) { items.style.display = 'block' } else { items.style.display = 'none' } }) }En el ejemplo anterior, solo se debe mostrar el primer elemento después de activar myFunction(), porque tiene el valor verde de valores y está marcado.
¡Gracias!
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
<html> <body> <div class='item'> <input type='checkbox' value='green' checked>Green</input> <input type='checkbox' value='red'>Red</input> </div> <div class='item'> <input type='checkbox' value='yellow'>Yellow</input> <input type='checkbox' value='orange'>Orange</input> </div> <script> function MyFunction () { const values = ['green', 'red']; let items = document.querySelectorAll('.item'); items.forEach(item => { if([].slice.call(item.children).filter(a => a.checked).length > 0) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } MyFunction(); </script>
·
Juan Pablo Isaza
Relatório
Responde à pergunta