¡Hola! Soy muy nuevo en Javascript y estoy desarrollando un proyecto en el que dependiendo de una selección radial, debe aparecer uno de dos divs que están escondidos. La parte complicada es que estoy generando campos dependiendo de un cierto número de usuarios. Hasta ahora se ve así:
function updateItems(_this) {
var ItemCount = +_this.value;
var results = document.querySelector('#results');
results.innerHTML = '';
for (var i = 1; i <= ItemCount; i++) {
var input = document.createElement('input');
var label = document.createElement("label");
var contenedor1 = document.createElement("div");
contenedor1.className = 'contenedor1';
contenedor1.id = 'contiene1' + i;
var contenedor2 = document.createElement("div");
contenedor2.className = 'contenedor2';
contenedor2.id = 'contiene2' + i;
var input1_1 = document.createElement('input');
var input1_2 = document.createElement('input');
var label1_1 = document.createElement("label");
var label1_2 = document.createElement("label");
var input2 = document.createElement('input');
var label2 = document.createElement("label");
var select1 = document.createElement('select');
var select2 = document.createElement('select');
var label3 = document.createElement('label');
var z = document.createElement("option");
var t = document.createTextNode("SELECCIONAR");
z.value = '0';
z.appendChild(t);
var z1 = document.createElement("option");
var t1 = document.createTextNode("Clase Turista");
z1.value = '3500';
z1.appendChild(t1);
var z2 = document.createElement("option");
var t2 = document.createTextNode("Clase Ejecutiva");
z2.value = '3800';
z2.appendChild(t2);
var z3 = document.createElement("option");
var t3 = document.createTextNode("Cabina Privada");
z3.value = '4000';
z3.appendChild(t3);
var z4 = document.createElement("option");
var t4 = document.createTextNode("Cabina Privada");
z4.value = '4000';
z4.appendChild(t4);
var z5 = document.createElement("option");
var t5 = document.createTextNode("SELECCIONAR");
z5.value = '0';
z5.appendChild(t);
var z6 = document.createElement("option");
var t6 = document.createTextNode("Clase Turista");
z6.value = '2450';
z6.appendChild(t1);
var z7 = document.createElement("option");
var t7 = document.createTextNode("Clase Ejecutiva");
z7.value = '2660';
z7.appendChild(t2);
var z8 = document.createElement("option");
var t8 = document.createTextNode("Cabina Privada");
z8.value = '2800';
z8.appendChild(t3);
var z9 = document.createElement("option");
var t9 = document.createTextNode("Cabina Privada");
z9.value = '2800';
z9.appendChild(t4);
label.innerText = 'Pasajero ' + i;
input.type = "text";
input.name = "pasajeroNombre" + i;
input.placeholder = "Nombre completo";
input.className = "form-control";
label1_1.innerText = '¿Adulto Mayor? (Mayor de 60 años)'
input1_1.type = "radio";
input1_1.name = "seleccion" + i;
input1_1.id = "vejestorios";
input1_1.value = "Adulto Mayor";
input1_1.placeholder = "Adulto Mayor";
input1_1.className = "form-control";
label1_2.innerText = '¿Menor de edad? (Menor de 12 años)';
input1_2.type = "radio";
input1_2.name = "seleccion" + i;
input1_2.id = "escuincles";
input1_2.value = "Menor de Edad";
input1_2.placeholder = "Menor de edad";
input1_2.className = "form-control";
label2.innerText = 'Identificación ' + i;
input2.type = "file";
input2.name = "pasajeroID" + i;
input2.placeholder = "Identificación"; //add a placeholder
input2.className = "form-control"; // set the CSS class
label3.innerText = 'Asiento ' + i;
select1.id = "mySelect";
select1.name = "hospedaje" + i;
select1.className = "form-control lead";
select2.id = "mySelect1";
select2.name = "hospedaje" + i;
select2.className = "form-control lead";
results.appendChild(label);
results.appendChild(document.createElement("br"));
results.appendChild(input);
results.appendChild(document.createElement("br"));
results.appendChild(label1_1);
results.appendChild(document.createElement("br"));
results.appendChild(input1_1);
results.appendChild(label1_2);
results.appendChild(document.createElement("br"));
results.appendChild(input1_2);
results.appendChild(document.createElement("br"));
results.appendChild(document.createElement("br"));
results.appendChild(label2);
results.appendChild(document.createElement("br"));
results.appendChild(input2);
results.appendChild(document.createElement("br"));
results.appendChild(label3);
results.appendChild(contenedor1).appendChild(select1).appendChild(z);
results.appendChild(contenedor1).appendChild(select1).appendChild(z1);
results.appendChild(contenedor1).appendChild(select1).appendChild(z2);
results.appendChild(contenedor1).appendChild(select1).appendChild(z3);
results.appendChild(contenedor1).appendChild(select1).appendChild(z4);
results.appendChild(contenedor2).appendChild(select2).appendChild(z5);
results.appendChild(contenedor2).appendChild(select2).appendChild(z6);
results.appendChild(contenedor2).appendChild(select2).appendChild(z7);
results.appendChild(contenedor2).appendChild(select2).appendChild(z8);
results.appendChild(contenedor2).appendChild(select2).appendChild(z9);
results.appendChild(document.createElement("hr"));
results.appendChild(document.createElement("br"));
results.appendChild(document.createElement("br"));
}
}
.contenedor1 {
color: #000000;
border: solid;
padding: 1% 1% 1% 1%;
display: none;
}
.contenedor2 {
color: #000000;
border: solid;
padding: 1% 1% 1% 1%;
display: none;
}
<form action="/action_page.php" id="form">
<div class="form-group">
<label for="membership-members">Número de pasajeros:</label>
<input type="number" min="0" id="membership-members" name="uFriends"
onchange="updateItems(this)" oninput="updateItems(this)">
</div>
<div id="results">
</div>
</form>
¿Cómo puedo hacer para que dependiendo de la selección radial que haga mi usuario (adulto mayor o menor de edad) me aparezca el contenedor 1 y se esconda el contenedor 2, o en su defecto, aparezca contenedor 2 y se esconda el 1 respectivamente?
Yo había pensado algo así, pero no me sale:
<script>
function descuento(_this) {
var contadorDescuento = +_this.value
for (var i = 1; i <= contadorDescuento; i++) {
$(document.getElementByName('seleccion' + i)).click(function() {
if($(this).attr('value') == 'escuincles') {
$(document.getElementById('contiene1' + i)).show();
$(document.getElementById('contiene2' + i)).hide();
}
else if($(this).attr('value') == 'vejestorios') {
$(document.getElementById('contiene1' + i)).hide();
$(document.getElementById('contiene2' + i)).show();
}
else {
$(document.getElementById('contiene1' + i)).hide();
$(document.getElementById('contiene2' + i)).hide();
}
});
}
}
</script>
:checked
y selectores hermanos+
/~
onda es.stackoverflow.com/a/187565/81450