0

Tengo el siguiente código donde hay varios checkbox, necesito que al activar la ultima opcion me muestre un input donde puedan poner una opción diferente a las que tengo, ya me activa el input al seleccionar el checkbox "Otro" pero quiero que se guarde el valor del input en el array junto on los valores de los checkbox seleccionados. Espero me puedan ayudar, de antemano gracias!

  function comprobar(obj)
  {
      if (obj.checked){
  document.getElementById('otroC').style.display = "";
  var otro= document.getElementById('otroO').value;
  document.getElementById('otroC').value= otro ;

     } else{
  document.getElementById('otroC').style.display = "none";
     }
  }

  $(document).ready(function() {
  $('[name="comor[]"]').click(function() {
    var arr = $('[name="comor[]"]:checked').map(function(){
      return this.value;
    }).get();
    var comorbilidades = arr.join(', ');
    $('#arr').text(JSON.stringify(arr));
    document.getElementById('comorbilidades').value= arr;

  });

});
            <div class="form-group col-md-4">
            <label >Comorbilidades:</label><br>
            <?php $arrayC = explode(",", $comorbilidades); ?>

            <input type="checkbox" name="comor[]" <?php  if (isset($arrayC)) { foreach($arrayC as $select){ if ($select =="DM") {  echo "checked"; } } } ?> value="DM" /> DM<br />
            <input type="checkbox" name="comor[]" <?php  if (isset($arrayC)) { foreach($arrayC as $select){ if ($select =="HTA") {  echo "checked"; } } } ?> value="HTA" /> HTA<br />
            <input type="checkbox" name="comor[]" <?php  if (isset($arrayC)) { foreach($arrayC as $select){ if ($select =="SP/OBESIDAD") {  echo "checked"; } } } ?> value="SP/OBESIDAD" /> SP/OBESIDAD<br />
            <input type="checkbox" name="comor[]" <?php  if (isset($arrayC)) { foreach($arrayC as $select){ if ($select =="IRC") {  echo "checked"; } } } ?> value="IRC" /> IRC<br />
            <input type="checkbox" name="comor[]" <?php  if (isset($arrayC)) { foreach($arrayC as $select){ if ($select =="EPOC-ASMA") {  echo "checked"; } } } ?> value="EPOC-ASMA" /> EPOC-ASMA<br />
            <input type="checkbox" id="comorO" onChange="comprobar(this);" value="" <?php  if (isset($arrayC)) { foreach($arrayC as $select){ if ($select !="DM" && $select !="HTA" && $select !="SP/OBESIDAD" && $select !="IRC" && $select !="EPOC-ASMA") {  echo "checked"; } } } ?> />Otro
            <input type="text" id="otroC" name="comor[]" style="display:none" value="<?php if(isset($arrayC)) { foreach($arrayC as $select){ if ($select !='DM' && $select !='HTA' && $select !='SP/OBESIDAD' && $select !='IRC' && $select !='EPOC-ASMA') {  echo $select; } } } ?>" />

            <input class="form-control fecha" type="input" name="comorbilidades" id="comorbilidades" value="<?php echo $comorbilidades; ?>" <?php echo $disEgreso; ?>>
            </div>

6
  • Si te refieres a guardarlo en arr veo tu código mal organizado para los fines que buscas. Yo declararía arr como una variable que no dependiese de los click de cada elemento y asignaría un listener que agrupe tanto los click de los checkbox como el change del input, donde se controlasen dos eventos: 1. si el checkbox se seleccionó o no, entonces metería el dato en el array; 2. si el input adquirió valor o no y entonces lo metería en el array. El problema de tu código más que nada es que está mal organizado y con una lógica demasiado complicada y poco flexible.
    – A. Cedano
    Commented el 5 jul. 2020 a las 22:25
  • Algun ejemplo?, no tengo mucha experiencia con checkbox.
    – isela rojo
    Commented el 5 jul. 2020 a las 22:28
  • Te puedo poner un ejemplo simple, porque el código PHP también es uff, demasiado mareador. Todo ese código se puede simplificar, pero ya ese es otro tema. Si quieres te pongo un ejemplo basado en varios checkbox, sin entrar en tu código PHP.
    – A. Cedano
    Commented el 5 jul. 2020 a las 22:31
  • Claro! te lo agradezco.
    – isela rojo
    Commented el 5 jul. 2020 a las 22:32
  • Ok, vamos a ello. Hay algo que no queda claro, ¿en el input que se activa al seleccionar el último checkbox va un valor escrito por defecto o el usuario debe escribir un valor?
    – A. Cedano
    Commented el 5 jul. 2020 a las 22:36

1 respuesta 1

0

Mira si este código resuelve tu problema. He puesto comentarios en él.

El tipo de problema que resuelve este código es: cada vez que el checkbox Otro cambia recoge los checkbox que están seleccionados y los mete en un array. Además, activa el input oculto y cada vez que éste cambia, recoge su valor y lo guarda también en el array.

Esto se puede optimizar aún más o no, pero depende mucho del contexto, de qué destino tienen los datos, cómo piensas enviarlos o usarlos, de si los datos deben enviarse inmediatamente se pulsa el checkbox Otro o si se pueden modificar, de si el usuario debería poder activar/desactivar Otro varias veces, etc.

/*
   document.reay es obsoleto desde jQuery 3, 
   se recomienda usar function
*/
$(function() {
  var arr = [];

  /*
    Verificamos si el checkbox "otro" está seleccionado
  */
  var isChecked = $("#comorO").prop("checked") ? true : false;
  /*
    Mediante toggle, el input se hará visible o no
    según el estado del checkbox, que quedará reflejado
    en la variable isChecked
  */
  $("#otroC").toggle(isChecked);

  /* Evitamos funciones in line
     aquí escuchamos los cambios tanto del checkbox
     como del input
  */
  $("#comorO, #otroC").change(function(e) {
    /*
      Seleccionamos los checkbox con name comor[]
      guardando en el array los que estén seleccionados
     */
    arr = $("input:checkbox[name='comor[]']:checked").map(function() {
      return $(this).val();
    }).get();

    /*
      En este bloque también verificamos
      el estado del checkbox "otro"
      para decidir si mostrar/ocultar el input
    */

    isChecked = $("#comorO").prop("checked") ? true : false;
    $("#otroC").toggle(isChecked);
    
    /*
      Verificamos si el elemento que ha cambiado es el input
      y si es él guardamos el valor en el array
    */
    if (e.target.type === "text") {
      arr.push($(this).val());
    }
    console.log(arr);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="comor[]" value="DM" /> DM<br />
<input type="checkbox" name="comor[]" value="HTA" /> HTA<br />
<input type="checkbox" name="comor[]" value="SP/OBESIDAD" /> SP/OBESIDAD<br />
<input type="checkbox" name="comor[]" value="IRC" /> IRC<br />
<input type="checkbox" name="comor[]" value="EPOC-ASMA" /> EPOC-ASMA<br />
<input type="checkbox" id="comorO" value="" checked />Otro
<input type="text" id="otroC" name="comor[]" style="display:none" value="***" />
<br />
<input class="form-control fecha" type="input" name="comorbilidades" id="comorbilidades" value="valor de $comorbilidades">

2
  • funciona pero, cuando selecciono el check otro me muestra el input pero cuando quito la secciono no se oculta el input, también necesito que cuando entre a la pagina si el checkbox otro esta seleccionado me muestre el input no se si me puedas orientar como hacerlo.
    – isela rojo
    Commented el 6 jul. 2020 a las 1:56
  • @iselarojo revisa la nueva edición del código. El aspecto que comentas no quedó claro en la pregunta, por eso no fue cubierto en la 1ª versión del código. Todavía hay cosas que no quedan claras y eso impide (quizá) un código robusto. A mi me gusta someter el código a prueba, imaginando todas las acciones del usuario, pero al no tener todo el contexto es difícil blindarlo en todos los aspectos. Por ejemplo, ¿qué debe pasar cuando se selecciona/deselecciona el checkbox "otro", o cuando el usuario escribe en el input y luego deselecciona, o cuando selecciona/deselecciona otro de los checkbox? etc
    – A. Cedano
    Commented el 6 jul. 2020 a las 11:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.