Checkbox to select all and add the javascript selections

Question

Checkbox to select all and add the javascript selections

Navigation

#1 by (2 votes)

3

I am new to the forum, I have several days looking for the solution to my problem but I can not find it, the following happens:

I have a mysql table with the following records: "id, product, quantity, price", each record is dynamically displayed in an html table with a respective checkbox.

The checkboxes when I mark them add the value of each record with javascript (price) and the result of the sum (the selected checkboxes) shows them in an input: text called total.

My problem is that I need to make a checkbox of "Mark - unmark all", that when I press it I select all the checkboxes of the dynamic table and in turn I do the sum of the values of all the selected checkboxes.

I hope the above explanation is understandable, thank you very much in advance.

javascript php checkbox

asked by iKiishi 18.02.2017 в 02:31

source

1 answer

Restrict folder and files with .htaccess Print a label i for each ng-repeat of a Json

score 2 · Accepted Answer

The logic must be in one place, for example, a function and must be called in each event change of each checkbox. For the "check / unmark all" checkbox, only the change event must be generated for each checkbox and, since these are associated with a function, they will do their job as expected.

Example

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" />