How do I sum all checkboxes in javascript / jquery and how can it be dynamically displayed in a bootstrap label?

I am trying to get it dynamic but I just can’t get it done.

The label must add up all checkboxes and if a checkbox is checked or unchecked the total count number must be up or down.

If one checkbox is clicked and it is checked, the label must go up with +1, if the checkbox is clicked and the checkbox is unchecked then the label must go off with -1.

    <table id="productsTable" class="table table-striped">
        <thead>
        <th>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="checkAll">
                <label id="labelCount" class="form-check-label" for="flexCheckDefault">
                </label>
            </div>
        </th>
        <th onclick="sortProduct()" style="cursor: pointer">Product <i class="fas fa-sort"></i></th>
        <th onclick="sortBrand()" style="cursor: pointer">Merk <i class="fas fa-sort"></i></th>
        <th onclick="sortSupplier()" style="cursor: pointer">Leverancier <i class="fas fa-sort"></i></th>
        <th onclick="sortPrice()" style="cursor: pointer">Prijs <i class="fas fa-sort"></i></th>
        <th onclick="sortQuantity()" style="cursor: pointer">Quantiteit <i class="fas fa-sort"></i></th>
        </thead>
        <tbody>
        @foreach($product as $products)
            <tr>
                <td>
                    <div class="form-check">
                        <input name="checkbox" class="form-check-input" type="checkbox" value="">
                    </div>
                </td>
                <td>{{$products->title}}</td>
                <td>{{$products->brand}}</td>
                <td>{{$products->supplier}}</td>
                <td>{{$products->price}}</td>
                <td>{{$products->quantity}}</td>
            </tr>
        @endforeach
        </tbody>
    </table>

JavaScript
​x
 
    <table id="productsTable" class="table table-striped">
        <thead>
        <th>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="checkAll">
                <label id="labelCount" class="form-check-label" for="flexCheckDefault">
                </label>
            </div>
        </th>
        <th onclick="sortProduct()" style="cursor: pointer">Product <i class="fas fa-sort"></i></th>
        <th onclick="sortBrand()" style="cursor: pointer">Merk <i class="fas fa-sort"></i></th>
        <th onclick="sortSupplier()" style="cursor: pointer">Leverancier <i class="fas fa-sort"></i></th>
        <th onclick="sortPrice()" style="cursor: pointer">Prijs <i class="fas fa-sort"></i></th>
        <th onclick="sortQuantity()" style="cursor: pointer">Quantiteit <i class="fas fa-sort"></i></th>
        </thead>
        <tbody>
        @foreach($product as $products)
            <tr>
                <td>
                    <div class="form-check">
                        <input name="checkbox" class="form-check-input" type="checkbox" value="">
                    </div>
                </td>
                <td>{{$products->title}}</td>
                <td>{{$products->brand}}</td>
                <td>{{$products->supplier}}</td>
                <td>{{$products->price}}</td>
                <td>{{$products->quantity}}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
​

    <script> let checkboxAll = document.getElementsByName('checkbox');
    let checkboxCount = document.getElementById('labelCount');

    document.getElementById('checkAll').onclick = function () {
        let i;

            for (i = 0; i < checkboxAll.length; i++)
            {
                checkboxAll[i].click();
            }
    };  <script>

JavaScript
 
    <script> let checkboxAll = document.getElementsByName('checkbox');
    let checkboxCount = document.getElementById('labelCount');
​
    document.getElementById('checkAll').onclick = function () {
        let i;
​
            for (i = 0; i < checkboxAll.length; i++)
            {
                checkboxAll[i].click();
            }
    };  <script>
​

Answer

You need to add an event listener on each of the checkboxes:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="checkbox" class="myCheckbox" />
    <input type="checkbox" class="myCheckbox" />
    <input type="checkbox" class="myCheckbox" />
    <input type="checkbox" class="myCheckbox" />

    <div id="label">0</div>
    <script src="src/index.js"></script>
  </body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
​
  <body>
    <input type="checkbox" class="myCheckbox" />
    <input type="checkbox" class="myCheckbox" />
    <input type="checkbox" class="myCheckbox" />
    <input type="checkbox" class="myCheckbox" />
​
    <div id="label">0</div>
    <script src="src/index.js"></script>
  </body>
</html>
​

const checkboxes = document.querySelectorAll(".myCheckbox");
const label = document.querySelector("#label");

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener("click", () => {
    let total = 0;

    for (let i = 0; i < checkboxes.length; i++) {
      const currentCheckbox = checkboxes[i];
      if (currentCheckbox.checked) {
        total += 1;
      }
    }

    label.innerHTML = total;
  });
});

JavaScript
 
const checkboxes = document.querySelectorAll(".myCheckbox");
const label = document.querySelector("#label");
​
checkboxes.forEach((checkbox) => {
  checkbox.addEventListener("click", () => {
    let total = 0;
​
    for (let i = 0; i < checkboxes.length; i++) {
      const currentCheckbox = checkboxes[i];
      if (currentCheckbox.checked) {
        total += 1;
      }
    }
​
    label.innerHTML = total;
  });
});
​
​

Check out a working example: https://codesandbox.io/s/intelligent-nash-mbohj?file=/src/index.js

Advertisement

Answer