1

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!

2
  • Solo quieres qeu te muestre un check marcado? no pueden aparecer 3 checks a la vez? el 12 feb. 2019 a las 7:36
  • Tienen que poder añadirse y quitarse cuantos seleccionen, imaginatelo como si fuera un carrito, quieren piernas completas + brazos enteros, pues en la lista tienen que salir los dos productos como seleccionados. Si quitan 1 pues solo quedara uno en la lista. No se si me hago entender @IvanIsayenko
    – Miguel
    el 12 feb. 2019 a las 7:38

1 respuesta 1

1

REvisando tu codigo vi que haces un .append. Lo que te hace es añadir al elemento valores que has seleccionado, de esa manera siempre te añadirá sin borrar la selección antigua. Te lo solucione de la siguiente manera: antes de verificar todos los checks, vacio la selección con .empty() y posteriormente añado los checks. También te he simulado la suma del precio. No se modifico casi nada de html. Revisalo y espero que te funcione

$(document).ready(function () {
    var precios = new Map();
    precios.set("Piernas Enteras", "45.32");
    precios.set("Brazos Enteros", "76.76");
    precios.set("Zona Íntima", "32.00");
    $(":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) {
            $('#resva').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
                        $('#resva').append(
                            $(document.createElement('div')).text(item)
                        );

                        //Aqui te simulo la suma del precio total
                        $("#precioTotal").html(parseFloat( $("#precioTotal").html()) + parseFloat(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;
    });
});
<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><span id="precioTotal">0</span>€</h4>
        <a href="" class="btnAnadir pull-right">PEDIR LA CITA</a>
    </div>
</div>

15
  • Es estupendo muchas gracias @Ivan Isayenko pero así todos los productos tendrian el mismo precio??
    – Miguel
    el 12 feb. 2019 a las 8:06
  • No, si te fijas esta comentado, //aqui pondrias el precio de producto verdadero para cuando hagas ajax, te devuelva el precio o no se como lo quieres hacer, el 12 es para simularlo simplemente el 12 feb. 2019 a las 8:09
  • Si vi ese comentario, pero como lo paso el precio que tenga el checkbox ahí? no se muy bien como hacerlo @Ivan Isayenko
    – Miguel
    el 12 feb. 2019 a las 8:12
  • Por lo que veo checkbox no tiene ningun precio, lo bueno seria añadir el precio mediante ajax, con la consulta al servidor del precio, pero te puedo dar una solución rápida y no del todo correcta el 12 feb. 2019 a las 8:15
  • 1
    jejejeje si ya! la magia esta en tener el conocimiento ;)
    – Miguel
    el 12 feb. 2019 a las 8:55

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.