Cómo crear una lista de casillas de verificación dinámicamente con javascript

ACTUALIZACIÓN: el código se ha actualizado según los comentarios de Dan.

Tengo un problema con un proyecto en el que estoy trabajando. Necesito crear una lista de casillas de verificación dependiendo de lo que esté seleccionado en un menú desplegable de selección anterior. Me gustaría usar javascript para esto. Pude crear un menú desplegable de selección dependiente de la selección anterior, pero el cliente quiere casillas de verificación. Pensé que sería esencialmente hecho de la misma manera, excepto hacer casillas esta vez, pero no puedo hacer que funcione. Normalmente uso php para mi progtwigción y, por lo tanto, no conozco demasiado el javascript. Este es el código que tengo que hacer para seleccionar el menú desplegable … ¿cuál sería la mejor manera de convertirlo en una lista de casillas de verificación? Tenga en cuenta que este código se ha reducido considerablemente para que sea fácil de leer (solo las partes que importan están aquí).

Código:

    function populate(slct1,slct2){ var s1 = document.getElementById(slct1); var s2 = document.getElementById(slct2); s2.innerHTML = ""; if(s1.value == "Cat1"){ var optionArray = ["Subcat1","Subcat1.1","Subcat1.2"]; } else if(s1.value == "Cat2"){ var optionArray = ["Subcat2","Subcat2.1","Subcat2.2"]; } else if(s1.value == "Cat3"){ var optionArray = ["Subcat3","Subcat3.1","Subcat3.3"]; } for(var option in optionArray){ if (optionArray.hasOwnProperty(option)) { var pair = optionArray[option]; var newOption = document.createElement("option"); newOption.value = pair; newOption.innerHTML = pair; s2.options.add(newOption); } } }    

Dynamic Select Dropdown


Choose a Category: Cat1 Cat2 Cat3
Choose Subcategory:

Cualquier ayuda sería muy apreciada y haría todo lo posible para devolver el favor si alguna vez necesitara ayuda con algún desarrollo.

Una checkbox es un elemento de entrada simple con type='checkbox' . Por lo tanto, debe preparar al menos dos cosas: un nodo de texto para la descripción del cuadro y el cuadro mismo. En este caso, también es bueno usar un elemento para incluir ambas cosas antes mencionadas:

 // create the necessary elements var label= document.createElement("label"); var description = document.createTextNode(pair); var checkbox = document.createElement("input"); checkbox.type = "checkbox"; // make the element a checkbox checkbox.name = "slct[]"; // give it a name we can check on the server side checkbox.value = pair; // make its value "pair" label.appendChild(checkbox); // add the box to the element label.appendChild(description);// add the description to the element // add the label element to your div document.getElementById('some_div').appendChild(label); 

Debes seguir los pasos anteriores para cada par. Tenga en cuenta que debe borrar el

dado antes de completarlo:

 // clear the former content of a given 
document.getElementById('some_div').innerHTML = '';

El proceso de crear una checkbox dinámicamente es de hecho un poco más complicado que crear una opción de selección. Necesitas crear:

  • la checkbox
  • su etiqueta
  • y posiblemente un diseño de estilo

Aquí está la esencia del código, con el violín completo en http://jsfiddle.net/dandv/9aZQF/2/ :

 for (var option in optionArray) { if (optionArray.hasOwnProperty(option)) { var pair = optionArray[option]; var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = pair; checkbox.value = pair; s2.appendChild(checkbox); var label = document.createElement('label') label.htmlFor = pair; label.appendChild(document.createTextNode(pair)); s2.appendChild(label); s2.appendChild(document.createElement("br")); } }