如何对 javascript / jquery 中的所有复选框求和以及如何将其动态显示在 bootstrap 标签中？

Question

我正在尝试让它动态化，但我就是做不到。

标签必须将所有复选框相加，如果复选框被选中或未选中，则总计数必须是向上或向下。

如果一个复选框被点击并被选中，标签必须上升+1，如果复选框被点击并且复选框未被选中则标签必须下降-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>

    <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 1

您需要在每个复选框上添加一个事件侦听器：

<!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;
  });
});

查看一个工作示例：https://codesandbox.io/s/intelligent-nash-mbohj?file=/src/index.js

如何对 javascript / jquery 中的所有复选框求和以及如何将其动态显示在 bootstrap 标签中？

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

javascript

forms

jquery

bootstrap-5

laravel-8