0
377
ViewsJs: Function that Hides Divs According to an array?
I have divs ('items') with checkboxes inside each. How can I hide the items that doesn't have the checkboxes with the selected values checked?
<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'
}
})
}
In the example above, only the first item should be shown after firing myFunction(), because it has the value green from values, and it is checked.
Thanks!
·
Juan Pablo Isaza
1 answers
Answer question0
<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
Report
Answer question