Tengo una declaración if/else que devuelve una imagen si la casilla de pollo está marcada, sin embargo, si marca la casilla de pollo y otra todavía muestra la imagen, ¿cómo puedo configurar la declaración para que solo muestre la imagen solo si el pollo casilla de verificación está marcada?
El código es el siguiente:
if (chicken.checked == true) { document.getElementById("image").style.visibility = "visible"; } else { return document.getElementById("error").innerHTML = "*Please mark any of checkbox"; }Si desea mostrar la imagen solo cuando la casilla de verificación de pollo está marcada, entonces probablemente debería probar el valor de todas las demás casillas de verificación en la declaración if/else.
Inicialmente, en este ejemplo, la imagen está oculta. filter (el filter devuelve una matriz para que pueda verificar su longitud) en las casillas marcadas. Si la longitud de las casillas marcadas es 1 y es la casilla de pollo, elimine la clase oculta de la imagen; de lo contrario, vuelva a agregarla.
Nota: la razón por la que agregué un detector de clics al contenedor y no agregué uno a cada casilla de verificación es para aprovechar la delegación de eventos . El contenedor captura los eventos de las cajas a medida que suben por el DOM. Es por eso que debemos verificar que el elemento en el que se hizo clic sea una entrada (usando nodeName ).
// Cache some elements const chicken = document.querySelector('#chicken'); const container = document.querySelector('#container'); const boxes = document.querySelectorAll('input[type="checkbox"]'); // Add a listener to the container container.addEventListener('click', handleBox, false); function handleBox(e) { // Extract the nodeName, and the name of the // element that's been checked const { nodeName, name } = e.target; // If it's an input if (nodeName === 'INPUT') { // `filter` on the checked boxes // `[...boxes]` means convert the nodelist // (which doesn't have array methods) // to an array, so we can use `filter` const checkedBoxes = [...boxes].filter(box => box.checked); // If the number of checked boxes is 1, // and it's the chicken box... if (checkedBoxes.length === 1 && checkedBoxes[0].name === 'chicken') { // ...remove the hidden class from the chicken div... chicken.classList.remove('hidden'); } else { // ...otherwise add the hidden class back chicken.classList.add('hidden'); } } } .hidden { visibility: hidden; } <div id="container"> <input name="chicken" type="checkbox"> <label>Chicken</label><br/> <input name="mongoose" type="checkbox"> <label>Mongoose</label><br/> <input name="steve" type="checkbox"> <label>Steve</label><br/> <input name="kookaburra" type="checkbox"> <label>Kookaburra</label><br/> </div> <br /> <div id="chicken" class="hidden">Chicken image</div>