Saltar al contenido

Menú desplegable de selección múltiple HTML con ejemplo de código de casilla de verificación

Después de de nuestra extensa selección de datos pudimos solucionar este contratiempo que pueden tener muchos usuarios. Te compartimos la solución y esperamos servirte de gran apoyo.

Ejemplo 1: lista de casillas de verificación múltiples html

<style>
#checkboxes label
    display:block;
    padding:5px;</style><div id="checkboxes"><label for="one"><input type="checkbox" id="one"/>First</label><label for="two"><input type="checkbox" id="two"/>Second</label><label for="three"><input type="checkbox" id="three"/>Third</label></div>

Ejemplo 2: menú desplegable de selección múltiple con casilla de verificación mecanografiada

onChange(index_val)this.zoneModel=[]if(index_val ==0&&this.zonesList[0].checked==true)for(let i =1; i <this.zonesList.length; i++)this.zoneModel.push(this.zonesList[i].houzeyZoneName)this.zonesList[i].checked=true;this.zoneFlag=true;elseif(index_val ==0&&this.zonesList[0].checked==false)for(let i =1; i <this.zonesList.length; i++)this.zonesList[i].checked=false;this.zoneFlag=false;//testingelseif(index_val >0)for(let i =1; i <this.zonesList.length; i++)if(this.zonesList[i].checked==true)this.zonesList[i].checked=true;this.zoneFlag=true;this.zoneModel.push(this.zonesList[i].houzeyZoneName)if(this.zoneModel.length==this.zonesList.length-1)this.zonesList[0].checked=true;else//this.zoneFlag = false;//testingthis.zonesList[i].checked=false;if(this.zonesList[0].checked==true)this.zonesList[0].checked=false;

Ejemplo 3: casilla de verificación de selección múltiple

var expanded =false;functionshowCheckboxes()var checkboxes =document.getElementById("checkboxes");if(!expanded)
    checkboxes.style.display="block";
    expanded =true;else
    checkboxes.style.display="none";
    expanded =false;

valoraciones y comentarios

Nos puedes corroborar nuestra faena fijando un comentario o dejando una valoración te damos las gracias.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *