Crear y Eliminar Checkboxes y Radios con JavaScript: Tutorial de Manipulación del DOM

Crear y eliminar checkboxes con JavaScript

A continuación se muestra un ejemplo de página HTML con un formulario que permite crear y eliminar elementos de tipo checkbox dinámicamente mediante JavaScript.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Checkboxes</title>
</head>
<body>
   <fieldset>
      <legend>CREAR</legend>
      Label <input type="text" id="labelCheckBox">
      <br>
      ID <input type="text" id="idCheckBox">
      <br><br>
      Name <input type="text" id="nameCheckBox">
      <br><br>
      <button id="boton" onclick="crearCheckBox()">Enviar</button>
   </fieldset>
   <fieldset>
      <legend>Resultado</legend>
      <ul id="lista"></ul>
   </fieldset>
</body>
<script src="script.js"></script>
</html>

Código JavaScript (script.js)

function crearCheckBox() {
    var lista = document.getElementById("lista");
    var idIntroducido = document.getElementById("idCheckBox").value;
    var repetido = false;

    for (let i = 0; i < lista.childNodes.length; i++) {
        if (lista.childNodes[i].id == (idIntroducido + "li")) repetido = true;
    }

    if (!repetido) {
        var label = document.createElement("label");
        label.textContent = document.getElementById("labelCheckBox").value;
        label.setAttribute("for", idIntroducido);

        var input = document.createElement("input");
        input.type = "checkbox";
        input.id = idIntroducido;
        input.name = document.getElementById("nameCheckBox").value;

        var botonBorrar = document.createElement("button");
        botonBorrar.textContent = "Borrar";
        botonBorrar.setAttribute("onclick", "borrar('" + idIntroducido + "li" + "')");

        var li = document.createElement("li");
        li.id = idIntroducido + "li";
        li.appendChild(label);
        li.appendChild(input);
        li.appendChild(botonBorrar);

        document.getElementById("lista").appendChild(li);
    } else {
        alert("Ya existe un elemento con ese ID");
    }
}

function borrar(id) {
    document.getElementById(id).remove();
}

Nota: En el código original, el elemento label se creaba con createElement("labelCheckBox"), lo que generaba una etiqueta inválida. Se ha corregido a createElement("label").

Añadir y borrar radio buttons con JavaScript

El siguiente ejemplo muestra cómo añadir y borrar radio buttons dinámicamente en el DOM.

Código HTML y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Añadir Radios</title>
   <script>
        var radioCount = 0;

        function limpiarCajasTexto() {
            for (var i = 0; i < 4; i++) {
                document.getElementsByTagName("input")[i].value = "";
            }
        }

        function aniadir() {
            document.getElementById('miDiv2').innerHTML = '';

            var miDiv = document.createElement("div");

            var miBoton = document.createElement('button');
            miBoton.type = 'button';
            miBoton.appendChild(document.createTextNode('Borrar'));
            miBoton.onclick = function () { borrar(this.parentNode); };

            var elemento = document.createElement("input");
            var miTexto = document.createTextNode(document.getElementsByTagName('input')[3].value);

            elemento.name = document.getElementsByTagName("input")[0].value;
            elemento.id = document.getElementsByTagName("input")[1].value;
            elemento.value = document.getElementsByTagName("input")[2].value;
            elemento.type = "radio";

            miDiv.appendChild(elemento);
            miDiv.appendChild(miTexto);
            miDiv.appendChild(miBoton);
            document.getElementById('miDiv1').appendChild(miDiv);

            limpiarCajasTexto();
            radioCount++;
        }

        function borrar(elemento) {
            elemento.parentNode.removeChild(elemento);
            radioCount--;
        }

        function borrarUltimo() {
            var e = document.getElementById('miDiv1').children;
            if (e.length > 0) {
                e[e.length - 1].remove();
                radioCount--;
            } else {
                alert('No hay radios para borrar');
            }
        }
   </script>
</head>
<body>
    Propiedad name: <input type="text"/><br><br>
    Propiedad Id: <input type="text"/><br><br>
    Propiedad Value: <input type="text"/><br><br>
    Descripción: <input type="text"/><br><br>
    <button type="button" id="addButton" onclick="aniadir()">Añadir Radio al DOM</button>
    <button type="button" onclick="borrarUltimo()">Borrar Último Radio</button>
    <div id="miDiv1"></div>
    <div id="miDiv2"></div>
</body>
</html>

Notas de corrección

• Se corrigió createElement("labelCheckBox") por createElement("label").
• Se definió la variable miTexto y miBoton, que no estaban declaradas en el original.
• Se corrigió sumar.appendChild(miDiv), sustituido por document.getElementById('miDiv1').appendChild(miDiv).
• Se corrigió la referencia al input del texto de miTexto para usar la descripción correcta.