Buenas estoy haciendo un configurador, para que vayan seleccionando opciones y se sumen esas opciones a un listado de cosas seleccionadas (una especie de carrito).
Bien pues estoy haciendo una parte que por ejemplo eligen entre uno o otro:
Tipo de contenedor:
Contenedor 20 pies:
Contenedor 40 pies:
Ahora mismo puedo añadir las dos cosas a una lista final donde muestra lo que has comprado por decirlo de una forma. Pero la cuestión es que si elijo el primero y luego cambio al segundo, el primero se quite y se ponga el segundo.
El JavaScript
var total = 0;
function pintaContenedor( elemento ){
var miListaDeConceptos = [
{ "concepto": "Contenedor 20 pies", "precio": 20000, "Alturas": "1 Altura" },
{ "concepto": "Contenedor 40 pies", "precio": 30000, "Alturas": "2 Alturas"},
];
var elemento = miListaDeConceptos[ elemento ];
document.getElementById('nadaSeleccionado').style.display='none';
$( "#ContenedorElegido" ).append(
'<div id="div_0" class="col-12 listado" data-precio="'+elemento.precio+'">'+elemento.concepto+'<span class="pull-right">'+elemento.precio+',00 €</span><button onclick="borra20pies(this);" class="bt-comp"><i class="fa fa-times"></i></button><div>Alturas:<span class="pull-right">'+elemento.Alturas+'</span></div></div>' );
total += elemento.precio;
$("#htmlTotal").html('<div id="div_total" class="col-md-12"><span class="palab-total">TOTAL: </span><span class="palab-total2">'+total+',00 €*</span><div></div></div>');
}
HTML:
<div class="form-check">
<input class="form-check-input" type="radio" name="contenedor[]" id="contenedor" onchange="pintaContenedor(0);">
<label class="form-check-label" for="contenedor">
20 pies
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="contenedor[]" id="contenedor" onchange="pintaContenedor(1);">
<label class="form-check-label" for="contenedor">
40 pies
</label>
</div>
Aquí según al botón que apreto me añade el 0 o el 1 de la variable. Pero la idea es que si apreto el 1 me muestre el 1, pero si apreto el 2 el 1 se quite de la lista y se ponga el 2. Vamos que si puedes cambiar entre uno y otro, pero solo puedes seleccionar uno.
Ahora Muestro un div si no hay producto seleccionado
<div id="nadaSeleccionado" class=""style="padding: 19px;">
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="padding-right: 5px;"></i>Aun no a ningún extra
</div>
Y otro distinto, si hay productos seleccionados
<div id="ContenedorElegido" class=""></div>
Y el div donde muestro el total
<div id="htmlTotal"></div>