Question

Hola buen dia, tengo una duda y un problema.

Tengo un formulario que hace peticion a la db y en base a esos resultados muestra en pantalla dichos datos, en mi html tengo un while para recorrer es arreglo de datos hast ahi todo bien. Por cada fila creo un checkbox y resulta que en la parte final tengo una etiqueta html que dice total y se va llenando a partir de la sumatoria de cada checkbox o se elimina ese valor segun se check o se des-cheque el checkbox.

Ejemplo

tengo una tabla de productos y uno de sus campos se llama precio.
cuando los pinto en pantalla parecen.

cigarros 25.50 y seguido un checkbox
paletas 12.25 y seguido un checkbox
papas 14.12 y seguido un checkbox
plumas 5.40 y seguido un checkbox

Total <- esta e sun a etiqueta html

y asi por cada registro que encuentra en la db. Cuando presiono un check o varios este me debe de sumar el valor de cada producto y pintarlo a lado de total hasta ahi todo bien ya lo tengo.
mi duda biene ahora ya que aparte de poder chekear manualmente los checkbox tengo otros dos botones para chekear todos a la vez o des-chekearlos esto lo hice con un par de etiquetas <a> y mediante una funcion de javascript recorro todos los checkbox y los checkea o los deschekea segun el caso, pero tengo un problema.

cuando chekeo todos manualmente o los deschekea funciona correctamente.
cuando los chekeao por medio de chekear todos y deschekear todos con el otro boton tambien funciona.

El problema bien cuando hago lo siguiente. Suponiendo que son 10 registros los que me arroja la consulta a la db
chekeaotodos con el boton de chekear todos y luego deschekeo digamos 2 manualmente quedando 8 chekeados y 2 deschekeados, si luego presiono deschekear todos los deschekea sin problema, pero cuando vuelvo a chekear uno por uno el valor de mi total no toma ya en cuenta el valor de los dos checkbox que deschekie manualmente osea tengo una falla y lo mismo si chekeo todos eja de tomar los dos checked que deschekie manualmente.

Otro problema es que si chekeo todo y le buelvo a dar en cheakear me suma lo doble en el total .

Busque en la red pero ya entre en dudas, no se si mi problema sea de logica y no estoy abordando el temacomo deve de ser o es que tengo que crear varias funcionesjs. una para chekear todos, otra para deschekear, y otra para que sea manualmente. por cierto los checkbox son un array.
<input type="checkbox" name="micheckbox[]" data-precio="aqui paso el valor rel producto para recuperarlo por data">

para seleccionar todo lo hago asi

function seleccionar_todo(){
   for (i=0;i<document.f1.elements.length;i++)
      if(document.f1.elements[i].type == "checkbox")
         document.f1.elements[i].checked=1
} 

para desleccionar todo

function deseleccionar_todo(){
   for (i=0;i<document.f1.elements.length;i++)
      if(document.f1.elements[i].type == "checkbox")
         document.f1.elements[i].checked=0
} 

para sumarlos y restarlos manualmente lo hago asi

$(document).ready(function(){
    let acumulado = 0;
    $(".check").change(function(){
    if($(this).is(":checked")){
        acumulado += $(this).data('price');
    } else {
        acumulado -= $(this).data('price');
    }
    console.log(acumulado);
  })
})

se que estoy mesclando js con jquery pero al final es js por que con la funcion each de jquery no me funciono el seleccionar todos or ello realice dos funcioes una para seleccionar todos de un jalo y laotra para des-seleccionarlos de un jalon.

alguna sugerencia que me puedan dar o en que estare fallando. muchas gracias de antemano.

Answer 1

Ya logre resolver mi problema.

1) tenia que volver a setear los valores a 0 cuando se vuelve a presionar el boton de seleccionar todos. para que no se volvieran a resumar los valores.

2)lo mismo para el boton des-seleccionartodos, volverlo a poner en 0 depues de desceleccionar si no se queda encolado y retorna otro resultado.

3)quite las primeras funciones js para realizarlo con puro jquery.

me costo trabajo entender el funcionamiento de estos botones, ya habia trabajado con ellos, pero de forma mas sencilla, solo seleccionar un par y no tener aparte que hacer sumas o restas de valores en base a esa seleccion, pero todo bien.

Me comentaron que todavia estoy reutilizando mucho codigo, pero bueno por ahora es funcional y ya mas adelante lo ajustare.

Aqui les pongo como funciona.

$(document).ready(function() {
            var acumulado=0;
            var valorInicial=0;
            $(".micheckbox").change(function(){
                if($(this).is(":checked")){
                    acumulado += $(this).data('price');
                } else {
                    acumulado -= $(this).data('price');
                }
                if(Math.sign(acumulado) == 1){
                    $("#totalImporte").text('$ '+parseFloat(acumulado).toFixed(2));
                }else{
                    $("#totalImporte").text('$ '+valorInicial.toFixed(2));
                }
            });

            $('.seleccionaTodos').click(function(){
                acumulado=0;
                $('#forma :checkbox').each(function(){
                    $(this).prop('checked',true);
                    acumulado += $(this).data('price');
                    $("#totalImporte").text('$ '+parseFloat(acumulado).toFixed(2));
                });
            });

            $('.des-seleccionaTodos').click(function(){
                $('#forma :checkbox').each(function(){
                    $(this).prop('checked',false);
                    acumulado=0;
                    $("#totalImporte").text('$ '+valorInicial.toFixed(2));
                });
            });
            $("#totalImporte").text('$ '+valorInicial.toFixed(2));
        });