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
actualiza()
, qué intentaste hacer? Estás usando alguna librería de javascript?