Tajuk yang disemak: Kira jumlah berdasarkan pilihan kotak pilihan

Question

Saya sedang membangunkan aplikasi penjejakan kewangan yang mudah. Dalam permohonan itu, terdapat jadual dengan semua bil perbelanjaan dan kemudian jumlah amaun yang terletak di luar jadual.

Saya cuba mencari jalan menggunakan JS atau AJAX supaya apabila saya memilih 1 kotak pilihan dalam baris jadual, saya boleh memasukkan/mengecualikan bil daripada jumlah tersebut dan mengemas kini jumlah keseluruhan secara automatik untuk mencerminkan pengecualian/pemasukan.

Baris jadual dibuat secara dinamik, jadi setiap kali bil baharu ditambahkan, baris akan meningkat, bermakna ID kotak semak perlu ditambah.

<div class="card-body">
  <table class="display table" style="width:100%" id="example">
    <thead class="table-heading">
      <tr class="table-border">
        <th scope="col">#</th>
        <th scope="col">CREDITOR</th>
        <th scope="col">DESCRIPTION</th>
        <th scope="col">CATEGORY</th>
        <th scope="col">AMOUNT</th>
        <th scope="col" style="text-align: center">INCLUDE / EXCLUDE</th>
      </tr>
    </thead>
    <tbody>
      {% for item in debts %}
      <tr class="table-border table-items">
        <td>{{ forloop.counter }}</td>
        <td>{{ item.creditor }}</td>
        <td>{{ item.description }}</td>
        <td>{{ item.category }}</td>
        <td>£{{ item.amount }}</td>
        <td><input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" class="table-checkbox" id="myCheckbox" /></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

Saya ada sedikit JS

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

Ini mencetuskan amaran apabila kotak pilihan dipilih, tetapi ini hanya akan mencetuskan pada kotak pilihan pertama kerana kotak pilihan itu adalah yang mempunyai ID yang sama.

Jadi ini mungkin tugas yang sukar kerana saya memerlukan kotak pilihan JS untuk mengetahui jumlah baris dengan kotak pilihan ditandakan dan kemudian tolak nombor itu daripada jumlah atau sebaliknya. Mungkin ini pendekatan yang salah?

Jumlahnya dipaparkan sebagai:

<h3 class="text-right text-danger"><i class="mdi mdi-cube icon-size float-left"></i><span class="font-weight-bold">£{{total_monthly_outgoing|floatformat:2}}<span class="h6"> per month</span></span></h3>

Terima kasih

Answer 1

Anda hanya perlu mewakilkan

Saya perlu mengembangkan span anda dalam h3 untuk mengelakkan JavaScript menjadi sangat kucar-kacir

Berikan jumlah ID, ini lebih mudah daripada document.querySelector("h3.text-danger span").

Skrip ini tidak memerlukan ID

Sertakan apabila dipilih

const totalContainer = document.querySelector("h3.text-danger span");

document.querySelector(".card-body").addEventListener("click", (e) => {
  if (!e.target.matches(".table-checkbox")) return; // not a checkbox
  const total = [...document.querySelectorAll(".table-checkbox:checked")]
    .map(chk => +chk.closest("td").previousElementSibling.textContent.slice(1)) // remove the pound
    .reduce((a,b)=> a+b); // sum
  totalContainer.textContent = `£${total.toFixed(2)}`;
})

.table-checkbox {
  border: 2px dotted #00f;
  display: block;
  background: #ff0000;
}

  

    

      

        
#
        
CREDITOR
        
DESCRIPTION
        
CATEGORY
        
AMOUNT
        
INCLUDE / EXCLUDE
      
    
    

      

        
1
        
creditor 1
        
description 1
        
category 1
        
£123
        

      
      

        
2
        
creditor 2
        
description 2
        
category 2
        
£223
        

      
      

        
3
        
creditor 3
        
description 3
        
category 3
        
£323
        

      

    
  
  

£0 per month