En mi cms tengo un grupo de casillas de verificación para las categorías. Me gustaría tener una entrada de texto de abajo que donde el usuario puede introducir el nombre de una nueva categoría y va a agregar dinámicamente una nueva casilla con el nombre que se utiliza tanto para el valor y la etiqueta.

¿Cómo puedo hacer esto?

3 Comentarios

  1. 76
    <div id="cblist">
        <input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkbox</label>
    </div>
    
    <input type="text" id="txtName" />
    <input type="button" value="ok" id="btnSave" />
    
    <script type="text/javascript">
    $(document).ready(function() {
        $('#btnSave').click(function() {
            addCheckbox($('#txtName').val());
        });
    });
    
    function addCheckbox(name) {
       var container = $('#cblist');
       var inputs = container.find('input');
       var id = inputs.length+1;
    
       $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
       $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
    }
    </script>
    • La casilla de verificación que se crea perfectamente (mirado el código fuente generado usando firefox web developer extension), pero una vez que el formulario es enviado con la nueva casilla de verificación marcada no demuestra en la variable post. Mismo resultado para ambos Safari y Firefox. Alguna idea? como estoy perplejo.
    • es dentro de la forma? supongo que tendría que dar las casillas de verificación de un name que no tengo.
    • Después de una hora de golpear mi cabeza contra la pared me gustaría que este post en el que se celebró la respuesta. Básicamente había que mover el formulario abierto etiqueta sobre la apertura del elemento div. stackoverflow.com/questions/445002/…
    • de hecho. ‘tis lo que me refería con mi pregunta está dentro de la forma 😉 lo siento si eso estaba claro.
    • que le van a enseñar a mí para algunos chunga de marcado – gracias de nuevo por tu ayuda
    • cómo crear un máximo de 10 casilla de verificación en filas y 5 de casilla de verificación en las columnas..Después de alcanzar la casilla 10 en filas,la siguiente casilla de verificación debe iniciar a partir de la próxima columna..
    • bueno, tendrás que contar los elementos que ya se han añadido, y hacer los ajustes necesarios para su appendTo una vez que la fila actual está lleno. No debería ser muy complicado, pero es muy diferente de lo que se pide aquí. Usted debe comenzar una nueva pregunta. Asegúrese de hacerle saber a la gente lo que has probado.
    • El código ha funcionado para mí y yo sólo quiero hacer una pequeña modificación al limitar la casilla de verificación como he mencionado en mi anterior comentario..gracias voy a probar también, como usted dijo..por Favor hacer comentarios si usted tiene alguna sugerencia..
    • JSFiddle para demo para ver la respuesta en acción
    • ¿Cómo puedo agregar <div class=»form-check»> todo <input> y <label> el uso de este bonito camino?
    • Una forma sería la de definir var formCheck = $('<div/>', { 'class': 'form-check' }).appendTo(container); y, a continuación, cambie el append de destino en la entrada y la etiqueta de container a formCheck. Tenga en cuenta que usted necesita las comillas alrededor de class como clase es una palabra clave reservada en javascript.

  2. 5

    Uno de los elementos a considerar para el diseño de su interfaz es en qué evento (cuando se lleva a cabo, B pasa…) ¿la nueva casilla terminan siendo añadido?

    Digamos que hay un botón que hay junto al cuadro de texto. Cuando se pulsa el botón, el valor del cuadro de texto se convierte en una nueva casilla de verificación. Nuestro marcado podría ser similar al siguiente…

    <div id="checkboxes">
        <input type="checkbox" /> Some label<br />
        <input type="checkbox" /> Some other label<br />
    </div>
    
    <input type="text" id="newCheckText" /> <button id="addCheckbox">Add Checkbox</button>

    Basado en esta marcado su jquery podría unirse a la click evento del botón y manipular el DOM.

    $('#addCheckbox').click(function() {
        var text = $('#newCheckText').val();
        $('#checkboxes').append('<input type="checkbox" /> ' + text + '<br />');
    });
    • Creo que usted se olvidó de añadir el value atributo
  3. 3

    Poner una variable global para generar el id.

    <script>
        $(function(){
            //Variable to get ids for the checkboxes
            var idCounter=1;
            $("#btn1").click(function(){
                var val = $("#txtAdd").val();
                $("#divContainer").append ( "<label for='chk_" + idCounter + "'>" + val + "</label><input id='chk_" + idCounter + "' type='checkbox' value='" + val + "' />" );
                idCounter ++;
            });
        });
    </script>
    <div id='divContainer'></div>
    <input type="text" id="txtAdd" /> 
    <button id="btn1">Click</button>

Dejar respuesta

Please enter your comment!
Please enter your name here