0

Necesito actualizar el valor del precio segun el value de uno o varios checkbox

@foreach($componentes as $comp)
<input type='checkbox' id="check" onclick="actualiza()" name='componentes[{{$comp->nombre_componente}}]' class="custom-control-input" value='{{$comp->precio}}'> <span>{{$comp->nombre_componente}} + {{$comp->precio}}€   </span>
@endforeach
               
<br>
<p class="costetotal" id="costetotal"></p>

2
  • 1
    Querés actualizarlo mediante PHP o javascript? Veo que tenés una función actualiza(), qué intentaste hacer? Estás usando alguna librería de javascript?
    – azeós
    Commented el 8 jun. 2019 a las 5:02
  • La idea es que haya x checkbox generados dinamicamente y que al seleccionar / deseleccionar se actualice el valor de p con el valor correspondientes de cada uno, sumándose al estar marcado y restándose al ser desmarcado, preferiblemente en Js o Jquery
    – Mazcvei
    Commented el 8 jun. 2019 a las 22:02

2 respuestas 2

1

Le agregué la clase precio a cada uno de los checkbox. Ojo porque los ID de tus checkbox son todos iguales, deberías agregarle algo para diferenciarlos.

Cada vez que clickeas alguno, recorre todos los checkbox y suma los que están tildados.

function actualiza() {
    var total = 0;
    var precios = document.querySelectorAll('.precio');
  
    precios.forEach(function (precio) {
        total += precio.checked ? parseInt(precio.value) : 0;
    });
  
    document.getElementById('costetotal').innerHTML = total + '€';
}
<label for="check1">10€</label>
<input type='checkbox' id="check1" onclick="actualiza()" name='componentes[nombre]' class="custom-control-input precio" value='10'>

<label for="check2">15€</label>
<input type='checkbox' id="check2" onclick="actualiza()" name='componentes[nombre]' class="custom-control-input precio" value='15'>

<label for="check3">20€</label>
<input type='checkbox' id="check3" onclick="actualiza()" name='componentes[nombre]' class="custom-control-input precio" value='20'>

<p class="costetotal" id="costetotal">0€</p>

Con jQuery podrías hacer algo así (sacando el onclick):

var costetotal = 0;

$('.precio').on('change', function () {
    var precio = parseInt(this.value);
    costetotal += this.checked ? precio : -precio;
    $('#costetotal').text(costetotal + '€');
});

Mismo enfoque con JS (hay que cambiar el onclick a actualiza(this) y la clase precio ya no hace falta):

var costetotal = 0;

function actualiza(checkbox) {
    var precio = parseInt(checkbox.value);
    costetotal += checkbox.checked ? precio : -precio;
    document.getElementById('costetotal').innerHTML = costetotal + '€';
}
1
  • Perfecto, así si. Muchas gracias :D
    – Mazcvei
    Commented el 8 jun. 2019 a las 23:14
0

Primero de todo, en el foreach crear varios elementos input con el mismo id, deberías evitar eso.

Crea el checkbox extableciendo un ID unico como podria ser el siguiente

// Su id se veria algo asi: id="valor_420"
<input type='checkbox' id="valor_{{$comp->precio}}" onclick="actualiza(this.value)" name='componentes[{{$comp->nombre_componente}}]' class="custom-control-input" value='{{$comp->precio}}'>

Como ves, al hacer click le pasas su propio valor. Luego, en la funcion

// Le pasamos el valor
function actualiza(valor){
    // Seleccionamos la etiqueta <p> y le establecemos el valor
    document.getElementById('costetotal').innerHTML = valor
}

O bien, puedes establecer el valor directamente en la funcion en vez de establecerlo en el propio input y evitas crear el id

<input type='checkbox' onclick="actualiza({{$comp->precio}})" name='componentes[{{$comp->nombre_componente}}]' class="custom-control-input" value='{{$comp->precio}}'>

Otro detalle, a la hora de establecer el name, recuerda que deberían tener todos el mismo

1
  • La idea es que haya x checkbox generados dinamicamente y que al seleccionar / deseleccionar se actualice el valor de p con el valor correspondientes de cada uno, sumándose al estar marcado y restándose al ser desmarcado, preferiblemente en Js o Jquery
    – Mazcvei
    Commented el 8 jun. 2019 a las 20:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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