Buenas estoy intentando hacer una especie de carrito. Según el checkbox que seleccione, mostrara ese producto en la lista que esta en otro div
.
Pongo una porción del código ya que es una repetición del mismo y creo que bastara.
<span id="listaZonasL" class=zonasl style="">
<span class="inputGroup" style="margin:0px;">
<input id="BrazosE" name="opciones" type="checkbox" value="Brazos Enteros"/>
<label for="BrazosE">Brazos Enteros</label>
</span>
<span class="inputGroup" style="margin:0px;">
<input id="PiernasE" name="opciones" type="checkbox" value="Piernas Enteras"/>
<label for="PiernasE">Piernas Enteras</label>
</span>
<span class="inputGroup" style="margin:0px;">
<input id="ZonaI" name="opciones" type="checkbox" value="Zona Íntima"/>
<label for="ZonaI">Zona Íntima</label>
</span>
</span>
Luego tenemos el div donde mostramos los resultados según los checkbox marcados.
<div class="col-12 factura">
<h3>ZONAS ELEGIDAS</h3>
<div class="" id="resva">
<h5>No hay nada seleccionado</h5>
</div>
<div class="col-12 margPvx">
<h4>125,00€</h4>
<a href="" class="btnAnadir pull-right">PEDIR LA CITA</a>
</div>
</div>
El código ajax
$(document).ready(function() {
$(":checkbox").change(function(){
// defines un arreglo
var selected = [];
$(":checkbox[name=opciones]").each(function() {
if (this.checked) {
// agregas cada elemento.
selected.push($(this).val());
}
});
if (selected.length) {
$.ajax({
//cache: false,
type: 'post',
dataType: 'json', // importante para que
data: {'selected': JSON.stringify(selected)}, // jQuery convierta el array a JSON
url: "getZonas.php",
success: function (data){
$(data).each(function(index, item) {
$('#resva').append(
$(document.createElement('div')).text(item)
);
});
}
});
// esto es solo para demostrar el json,
// con fines didacticos
//alert(JSON.stringify(selected));
console.log(selected);
} else
alert('Debes seleccionar al menos una opción.');
return false;
});
});
Archivo getZonas.php
header('Content-type: application/json');
//$string = file_get_contents('./string.json');
$data = $_POST['selected'];
//var_dump($data);
$json = json_decode($data);
echo json_encode($json);
Por el momento añade a la lista pero, si le doy clic al primer check, perfecto, pero al darle al segundo también me vuelve a salir en la lista el primero y el segundo y si le diera al tercero pues me vuelven a salir los tres de nuevo y si los desmarco pues me vuelven a salir los 3, 2 o bien 1 de nuevo según cual pulse. Además tengo la necesidad de que no solo muestre el producto si no también muestre el precio que no se donde añadirselo.
Gracias!