Haber como detallo todo esto sin dejarme nada.
Tengo un div con una imagen de un rostro:
<img src="images/zonasHifu/facial.svg" alt="" id="lipoCuadro" class="fotoFacial">
Otro div con distintos checkbox:
<li class="list-group-item listmodifica">
Cuadrante superior
<label for="CuadranteSuperior" class="switch2">
<input id="CuadranteSuperior" name="opciones" type="checkbox" class="warning" value="Cuadrante Superior">
<span class="slider5 round"></span>
</label>
</li>
<li class="list-group-item listmodifica">
Cuadrante inferior
<label for="CuadranteInferior" class="switch2">
<input id="CuadranteInferior" name="opciones" type="checkbox" class="warning" value="Cuadrante Inferior">
<span class="slider5 round"></span>
</label>
</li>
<li class="list-group-item listmodifica">
Cuello y papada
<label for="CuelloPapada" class="switch2">
<input id="CuelloPapada" name="opciones" type="checkbox" class="warning" value="Cuello y papada">
<span class="slider5 round"></span>
</label>
</li>
<li class="list-group-item listmodifica">
Escote
<label for="Escote" class="switch2">
<input id="Escote" name="opciones" type="checkbox" class="warning" value="Escote">
<span class="slider5 round"></span>
</label>
</li>
<li class="list-group-item listmodifica">
Papada
<label for="Papada" class="switch2">
<input id="Papada" name="opciones" type="checkbox" class="warning" value="Papada">
<span class="slider5 round"></span>
</label>
</li>
<li class="list-group-item listmodifica">
Cuello
<label for="Cuello" class="switch2">
<input id="Cuello" name="opciones" type="checkbox" class="warning" value="Cuello">
<span class="slider5 round"></span>
</label>
</li>
Y otro div donde muestro los value de los checks que me hace una suma en plan ticket de compra.
Esto es para según los checks me muestre el ticket:
$(document).ready(function () {
var precios = new Map();
precios.set("Cuadrante Superior", "10");
precios.set("Cuadrante Inferior", "10");
precios.set("Cuello y papada", "30");
precios.set("Escote", "30");
precios.set("Facial completo", "30");
precios.set("Papada", "30");
precios.set("Cuello", "30");
$(":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) {
$('#resvahifu').empty();
$("#precioTotal").empty();
$("#precioTotal").html("0");
$.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) {
let precioProducto = precios.get(item); //aqui pondrias el precio de producto verdadero
$('#resvahifu').append(
$(document.createElement('li')).text(item)
);
//Aqui te simulo la suma del precio total
$("#precioTotal").html(parseInt( $("#precioTotal").html()) + parseInt(precioProducto))
});
}
});
// // esto es solo para demostrar el json,
// // con fines didacticos
// //alert(JSON.stringify(selected));
} else
alert('Debes seleccionar al menos una opción.');
if (selected.length == 0) {
//además no dejo desmarcar si solo queda un check
this.checked = true;
}
return false;
});
});
Getzonas.php:
<?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);
?>
Ahora me muestra el value del check pero necesito que me muestre por ejemplo:
Cuadrante superior 60€
Cuadrante inferior 20€
TOTAL: 80€
Eso por un lado, gracias a un compañero de aquí, cuando seleccionamos el check de facial completo y estan seleccionados otros como cuadrante superior se tiene que activar el check de facial completo y desactivar si hay uno o varios activados que son estos: cuadrante superior, cuadrante inferior, papada, papada + cuello y cuello y a la inversa también, si esta facial completo y selecciono cuello por ejemplo se desactive el facial completo.
Ahora más o menos funciona pero al activar facial completo me duplica los resultados en el ticket y al seleccionar por ejemplo cuello si facial completo esta marcada no se desmarca.
$(document).ready(function() {
$('#Facialcompleto').change(function(){
if($('#CuadranteSuperior').prop('checked'))
$('#CuadranteSuperior').click();
$('#CuadranteSuperior').attr('disabled', this.checked);
if($('#CuadranteInferior').prop('checked'))
$('#CuadranteInferior').click();
$('#CuadranteInferior').attr('disabled', this.checked);
if($('#CuelloPapada').prop('checked'))
$('#CuelloPapada').click();
$('#CuelloPapada').attr('disabled', this.checked);
if($('#Cuello').prop('checked'))
$('#Cuello').click();
$('#Cuello').attr('disabled', this.checked);
if($('#Papada').prop('checked'))
$('#Papada').click();
$('#Papada').attr('disabled', this.checked);
})
})
Pongo una foto del desarrollo para ver si se entiende mejor
No se si lo he explicado bien :S