Estoy tratando de construir una página web simple que crea dinámicamente una fila de casillas de verificación. Primero, descubrí cómo colocar las casillas de verificación en una sola fila:
.checkbox-inline { display: inline-block; } <form role="form" method="post"> <legend>What is Your Favorite Pet?</legend> <label class="checkbox-inline"> <input type="checkbox" name="cbpets[]" value="Cats"> Cats <br> </label> <label class="checkbox-inline"> <input type="checkbox" name="cbpets[]" value="Dogs"> Dogs <br> </label> </form>A continuación, encontré esta página Pregunta de StackOverflow (ver la primera respuesta) y pude crear las casillas de verificación, pero en varias filas. Ahora estoy atascado. Estoy tratando de poner las casillas de verificación en una fila, pero no he descubierto cómo. Intenté agregar (usando la sintaxis en la respuesta de stackoverflow)
var color = document.createElement("input"); color.setAttribute( 'style', 'class="checkbox-inline"', );Pero esto no funcionó. ¿Algo más que puedas sugerir que pruebe?
No necesita usar display: inline-block; para forzar todas las casillas de verificación en una sola línea. Simplemente elimine la etiqueta <br> en su label y luego todas las casillas de verificación se mostrarán en una línea.
<form role="form" method="post"> <legend>What is Your Favorite Pet?</legend> <label class="checkbox-inline"><input type="checkbox" name="cbpets[]" value="Cats">Cats</label> <label class="checkbox-inline"><input type="checkbox" name="cbpets[]" value="Dogs">Dogs</label> </form>No tiene que hacer ningún estilo CSS para esto, ya que las entradas estarán en línea de forma predeterminada de todos modos.
Agregue sus mascotas a una matriz, recorra la matriz y cree algunas entradas, y luego agregue el resultado de todas esas entradas al DOM.
// Cache the container element const container = document.querySelector('.container'); // Define the pets const pets = ['Dog', 'Cat', 'Moose', 'Barbary macaque', 'Snail']; // Temporary array to hold the input strings as // we build them in the loop const html = []; // Loop over the pets array, create a new // HTML string for each of them, and push that string // into our temporary array for (const pet of pets) { const input = ` <label> ${pet} <input type="checkbox"> </label> `; html.push(input); } // Add the completed HTML array to the container // by `joining` all the elements into one string container.insertAdjacentHTML('beforeend', html.join('')); .legend { margin-right: 0.5em; font-weight: 700; } <div class="container"> <span class="legend">What is Your Favorite Pet?</span> </div>Documentación adicional