Cómo permitir múltiples entradas múltiples botones cuando se seleccionan

Question

Tengo una aplicación jsFiddle a continuación:

http://jsfiddle.net/ybZvv/5/

Si abre la jsFiddle, verá un control superior, que contiene botones "respuesta". También verá algunos botones de letras, un botón "Verdadero" y un botón "Falso".

Los botones "Verdadero" y "Falso" funcionan perfectamente, lo que significa que si el usuario hace clic en "Verdadero" y luego hace clic en "Falso", reemplaza la entrada de texto ya que no puede tener una respuesta "Verdadero "y" Falso ".

Esto funciona igual para los botones "Sí" y "No".

Pero hay un problema con los botones de letras. Si hace clic en los botones de letras, se da cuenta de que puede hacer clic en varios botones de letras, lo cual está bien, pero el problema es que reemplaza la entrada de texto de esas letras que es incorrecta. Si se seleccionan varios botones de letras, debe mostrar las entradas de texto para todos los botones de letras, no reemplazar la entrada de texto con el último botón de letra seleccionado.

sé que el código de abajo

_oCurrAnswerContainer.html('');

vacía el contenedor DIV, por lo que elimina las entradas antes de crear uno nuevo.

Pero solo quiero que ocurra entre los botones "Verdadero" y "Falso" y los botones "Sí" y "No". Si selecciona botones de letras múltiples, no debería vaciar el contenedor:

Si los botones A, C y E están encendidos, entonces se muestran las entradas de texto A, C y E, si E se apaga entonces, se ingresa texto para E se elimina.

Answer 1

Supongo que quieres anexar. ¿Por qué no puedes hacer el código de esta manera?

_oCurrAnswerContainer.html(_oCurrAnswerContainer.html() + '' + NewContents); 

anexados a ella. No estoy seguro, ya que no entiendo la pregunta.

Answer 2

Parece que la solución es inspeccionar continuamente las letras seleccionadas, cada vez que el usuario hace una selección o anula la selección de una letra.

Ejemplo:

<script type='text/javascript'> 

    var checkboxes = $('form > p > input:checkbox'); 

    // updates the text input with the selected values... 
    var update = function() { 
     var values = []; 

     $('form > p > input:checked').each(function(idx, cb) { 
      values.push($(this).val()); 
     }); 

     $('#foo').val(values.join(', ')); 
    }; 

    // count the number of selected items... 
    var count = function() { 
     var n = $("input:checked").length; 
     $("div").text([n, 'box selected!'].join(' ')); 
    }; 

    // bind to the checkbox for clicks 
    // update the input field 
    // count the number of selected items 
    $(checkboxes).on('click', function(e) { 
     update(); 
     count(); 
    }); 

    update(); 

    count(); 
</script> 

ver este gist para un ejemplo de trabajo