Tengo el código de abajo, éste me oculta los divs pero quiero lograr la inversa: que en un entorno con varias cards, al seleccionar un check o varios, solo queden los checks con el id que tenga el value de éste. Ejemplo: si selecciono manzana y peras, que solo queden visibles las cards con id manzana y peras y las otras tengan display:none
, y al quitar el check vuelvan al estado original.
function getChecked() {
var checkboxes = document.querySelectorAll('input[name="colorCheckbox"]:checked');
var values = [...checkboxes].map(checkbox => checkbox.value);
console.log(values);
for (var i = 0; i < values.length; i++) {
document.getElementById(values).style.display = "none";
}
}
<div>
<label>
<input type="checkbox" name="colorCheckbox" onchange="getChecked()" value="red">
red
</label>
<label>
<input type="checkbox" name="colorCheckbox" onchange="getChecked()" value="green">
green
</label>
</div>
<div class="red box" id="red">Red Selected</div>
<div class="green box" id="green">Green Selected</div>