I have a checkbox type input whose name attribute is analysisnames[ ] and I also have several selects that I need to control through these checkboxes. What I want to get is:
- All the select are missing when the page loads
- For each checkbox you select, you must save its value and the value of the select that will appear when clicking this checkbox
- If I click on any other checkbox, the select of the first clicked checkbox (without the checkbox being deselected) will disappear and the select of the currently clicked checkbox will appear, and if I click on a third checkbox, the select of the second will disappear checkbox keeping said checkbox active, but only the checkbox of the last element clicked would appear.
- When deselecting a checkbox, the stored value of this checkbox and its select is deleted
<!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 >Ids seleccionados en matriz <span id="arr"></span></div>
<div >Ids 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>
I have created an array that loops through the number of checkboxes I have in the array
<script>
var elementos = document.getElementsByName("nombresdeAnalisis[]");
for (x=0;x<elementos.length;x++){
}
Here I have count all the activated checkboxes and I have achieved that when clicking on a checkbox, its associated select appears, but if I select another checkbox, the select disappears but the select of the new clicked checkbox does not appear
$(document).ready(function() {
$('[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");
}
Here I try that for each selected select, its value is stored but obviously, it doesn't work either
$(".seleccion").change(function(){
opcionseleccionada();
});
function opcionseleccionada(){
var array = [];
//for each Select selected,
$(".seleccion :selected").each(function(){
//Stores the value of this select
var valor = array[$(this).val()];
});
</script>
Aucun commentaire:
Enregistrer un commentaire