मैं इसे गतिशील बनाने की कोशिश कर रहा हूं लेकिन मैं इसे पूरा नहीं कर सकता।

लेबल में सभी चेकबॉक्स शामिल होने चाहिए और यदि कोई चेकबॉक्स चेक या अनचेक किया गया है तो कुल गणना संख्या ऊपर या नीचे होनी चाहिए।

यदि एक चेकबॉक्स पर क्लिक किया गया है और इसे चेक किया गया है, तो लेबल को +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>
0
tom soplanit 28 पद 2020, 05:12
आपके द्वारा चेक किए गए चेकबॉक्स को गिनने के लिए आपको सभी चेकबॉक्स के लिए श्रोता बनाना होगा।
 – 
Tyr
28 पद 2020, 05:16

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

1
mtl 28 पद 2020, 05:48