4

soy nuevo en el foro, tengo varios días buscando la solución a mi problema pero no logro encontrarla, pasa lo siguiente;

Tengo una tabla mysql con los siguientes registros: "id, producto, cantidad, precio", cada registro es mostrado dinamicamente en una tabla html con un respectivo checkbox.

Los checkbox al marcarlos me suma el valor de cada registro con javascript (precio) y el resultado de la suma (los checkbox seleccionados) me los muestra en un input:text llamado total.

Mi problema es que necesito hacer un checkbox de "Marcar - desmarcar todos", que cuando lo pulse me seleccione todos los checkbox de la tabla dinamica y a su vez me haga la suma de los valores de todos los checkbox seleccionados.

Espero sea entendible la explicación de arriba, muchas gracias de antemano.

0

1 respuesta 1

3

La lógica debe estar en un solo lugar, por ejemplo, una función y debe ser llamada en cada evento change de cada checkbox. Para el checkbox "marcar/desmarcar todos", solo se debe generar el evento change para cada checkbox y al estar estos asociados a una función, harán su trabajo como se espera.

Ejemplo

let buys = document.getElementById('tbl-buys');
let cboxAll = buys.querySelector('thead input[type="checkbox"]');
let cboxes = buys.querySelectorAll('tbody input[type="checkbox"]');
let totalOutput = document.getElementById('total');
let total = 0;

[].forEach.call(cboxes, function (cbox) {
  cbox.addEventListener('change', handleRowSelect);
});

cboxAll.addEventListener('change', function () {
  [].forEach.call(cboxes, function (cbox) {
    //cbox.checked = cboxAll.checked;
    cbox.click();
  });
});

function handleRowSelect (e) {
  let row = e.target.parentNode.parentNode;
  let qty = row.querySelector('td:nth-child(3)').textContent;
  let price = row.querySelector('td:nth-child(4)').textContent;
  let cost = Number(qty) * Number(price);
  
  if (e.target.checked) {
    total += cost;
  } else {
    total -= cost;
  }
  
  total = Number(total.toFixed(2));
  totalOutput.value = total;
}
body {
  padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped table-bordered" id="tbl-buys">
  <thead>
    <tr>
      <th>
        <input type="checkbox"/>
      </th>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Laptop Dell XPS 15</td>
      <td>1</td>
      <td>782.49</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Mouse bluetooth solar</td>
      <td>1</td>
      <td>19.90</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Sony Headphones 1000px</td>
      <td>1</td>
      <td>29.90</td>
    </tr>
  </tbody>
</table>

<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />

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