Js: 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!