1

no se si sea posibles lo que necesito conseguir. Pero lo que quiero es recorrer un array de checkbox, dar a cada checkbox control sobre un select especifico, es decir, si hago click en el checkbox con valor 1, que se muestre el select 1, si hago click en el checkbox con valor 4, que desaparezca el select1 y que aparezca el select 4 pero que el checkbox 1 permanezca en checked. Si desselecciono un checkbox, simplemente se eleimina el valor elegido en su select y su propio valor.

Por favor, espero que alguien me ayude.

Hasta ahora he conseguido que aparezca y desparezca un select al hacer click en el checkbox, El problema esta en que si hago click en otro checkbox, el primer select desparece pero no aparece el select del checkbox que acabo de activar

<script>

//He creado un array que recorra todos los checkbox que tengo
var elementos = document.getElementsByName("nombresdeAnalisis[]");

for (x=0;x<elementos.length;x++){


}

$(document).ready(function() {

//para identificar los checkbox activos
  $('[name="nombresdeAnalisis[]"]').click(function() {
      
    var arr = $('[name="nombresdeAnalisis[]"]:checked').map(function(){
      return this.value;

     if (this.value == "2") {

      alert(this.value);
     }

    }).get();
    
    var str = arr.join(',');
    
    $('#arr').text(JSON.stringify(arr));
    
    $('#str').text(str);

    if ($('nombresdeAnalisis[]')[2] =="checked") {

          $("#opciones2").css("visibility","visible");
    }else{

         $("#opciones2").css("visibility","hidden");

    }if(str== "3") {

      $("#opciones3").css("visibility","visible");
    }else{

         $("#opciones3").css("visibility","hidden");

    }if(str== "4") {

      $("#opciones4").css("visibility","visible");
    }else{

         $("#opciones4").css("visibility","hidden");

    }



    $(".seleccion").change(function(){

    //aqui llamamo a la funcion opcionseleccionada() que quiero que me ayude a alamacenar el valor de cada select
    opcionseleccionada();

  });

function opcionseleccionada(){
  var array = [];

//NADA DE ESTO ME HA FUNCIONADO
  
  $(".seleccion :selected").each(function(){

  
    var valor = array[$(this).val()];
  });
</script>

Codigo HTML


<!doctype html>
<html>
<head>
<link rel="stylesheet" href="librerias/bootstrap/css/bootstrap.min.css">
</head
<body>
<form class="row formularioCrearPaciente" action="php/insertarAnalisis2.php" method="post" id="FormularioRegistrarPaciente"> 

               <?php 


include("php/conexion.php");

$sql = "SELECT * FROM tipo_analisis";
  $datosnombreAnalisis = $conexion->query($sql);
  $fila = $datosnombreAnalisis->fetch_array();
    
  ?>  


                 <div class="col-md-6 form-group">
                     <label for="nombre">Nombre:</label>

                     <select class="form-select" aria-label="size 3  select example" name="nombre">
                   <option selected>Seleccione los analisis</option>
                   <?php
                        while ($row = mysqli_fetch_array($datosnombreAnalisis))

                        {
                                         
                  ?>
         <option value="<?php echo $row['nombre_analisis'];?>"> <?php echo $row['nombre_analisis'];?> 

         <input type="checkbox" name="nombresdeAnalisis[]" value="<?php echo $row[0];?>" class="delete-checkbox" id ="nombresactivados" ><?php echo $row['id_tipoanalisis']?>

      </option>

                       <?php
                    }

        
                       ?>

                       <?php
 
                       ?>
               </select>
                <div >Array de checkbox <span id="arr"></span></div>
  <div >Valores de los checkbox seleccionados <span id="str"></span></div>
                     <span id="errores" class="errores"></span>

                  <div class="col-md-6 form-group">
                     <label for="fecha">Select 1</label>
                     <select  class="form-select seleccion" id="opciones1" name="opciones" style="visibility: hidden;">
                        <option>
                          Seleccione la opcion--
                        </option>
                        <option value="positivo">
                           positivo
                        </option>
                        <option value="negativo">
                           negativo
                        </option>
                     </select>

                           <label for="fecha">Select 2</label>
                     <select  class="form-select seleccion" id="opciones2" name="opciones" style="visibility: hidden;">
                        <option>
                          Seleccione la opcion--
                        </option>
                        <option value="positivo">
                           positivo
                        </option>
                        <option value="negativo">
                           negativo
                        </option>
                     </select>
                      <label for="fecha">Select 3</label>
                     <select  class="form-select seleccion" id="opciones3" name="opciones" style="visibility: hidden;">
                        <option>
                          Seleccione la opcion--
                        </option>
                        <option value="positivo">
                           positivo
                        </option>
                        <option value="negativo">
                           negativo
                        </option>
                     </select>

                     <label for="fecha">Select 4</label>
                     <select  class="form-select seleccion" id="opciones4" name="opciones" style="visibility: hidden;" >
                        <option>
                          Seleccione la opcion--
                        </option>
                        <option value="positivo">
                           positivo
                        </option>
                        <option value="negativo">
                           negativo
                        </option>
                     </select>

                  </div>
                  </div>
            
                  </div>
                   
                  <div class="col-md-6 form-group">
                     <button type="submit"id="registrarAnalisis" class="btn btn-primary">Registrar Analisis</button>
                  </div>
                  
           


            </form>

</body>
</html>

1 respuesta 1

1

He extraído la problemática de tu código para construir un ejemplo ejecutable de como podrías solucionarlo. También he simplificado mucho el código para que vaya justo al problema.

Básicamente lo que hago es comprobar si el checkbox que se ha pulsado se ha seleccionado o deseleccionado.

  • En caso de seleccionarse oculto todos los select que no sean el vinculado a ese checkbox para luego mostrar el vinculado.

  • En caso de deseleccionarse lo que hago es poner a 0 (no seleccionado en mi ejemplo) el valor del select relacionado.

Por tema de limpieza de código he creado 2 funciones de apoyo para que se encarguen de ocultar todos los selecs menos el relacionado al checkbox pulsado y también otra que se encarga de poner a '0' el valor del select que le pases como parámetro.

Ya que parece que estás usando JQuery lo he resuelto todo usando dicho framework.

$(function() {
  $('.miCheckbox').change(function() {
    const checkboxPulsado = {
      valor: $(this).val(),
      esChecked: $(this).is(':checked')
    }
    const selectRelacionado = $(`#miSelect-${checkboxPulsado.valor}`)
    
    if (checkboxPulsado.esChecked) {
      ocultaTodosLosSelectMenosEste(selectRelacionado)
      selectRelacionado.show()
    }
    else {
      inicializaValorDelSelect(selectRelacionado)
    }
  })
})

function ocultaTodosLosSelectMenosEste(selectRelacionado) {
  const todosLosSelects = $('select')
  
  todosLosSelects.not(selectRelacionado).hide()
}

function inicializaValorDelSelect(select) {
  select.val('0')
}
select {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Checkbox 1: <input type="checkbox" class="miCheckbox" value="1" /></p>
<p>Checkbox 2: <input type="checkbox" class="miCheckbox" value="2" /></p>
<p>Checkbox 3: <input type="checkbox" class="miCheckbox" value="3" /></p>
<p>Checkbox 4: <input type="checkbox" class="miCheckbox" value="4" /></p>

<select id="miSelect-1">
  <option value="0">Sin seleccionar 1</option>
  <option value="1">Opción 1-A</option>
  <option value="2">Opción 1-B</option>
</select>

<select id="miSelect-2">
  <option value="0">Sin seleccionar 2</option>
  <option value="1">Opción 2-A</option>
  <option value="2">Opción 2-B</option>
</select>

<select id="miSelect-3">
  <option value="0">Sin seleccionar 3</option>
  <option value="1">Opción 3-A</option>
  <option value="2">Opción 3-B</option>
</select>

<select id="miSelect-4">
  <option value="0">Sin seleccionar 4</option>
  <option value="1">Opción 4-A</option>
  <option value="2">Opción 4-B</option>
</select>

2
  • Hola, @phpMyGuel esto es lo que necesito, el caso esta en que en el codigo que he publicado tambien tiene una parte de php que es el que se encarga de repetir tantos checkbox como valores tengo en mi Base de datos. Tal vez por eso no me esta funcionado tu codigo. Si pudieras hacerlo incluyendo el codigo php, seria de mucha ayuda
    – user287003
    el 20 mar. a las 12:52
  • ya vi mi error, ya que se ocultaban todos los select, esto incluia al que contenia los inputs checkbox, agregue una clase para los checkbox que necesito que desaparezcan y ya me funciona. Gracias!!!
    – user287003
    el 20 mar. a las 13:42

Tu Respuesta

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

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