Überarbeiteter Titel: Berechnen Sie die Gesamtsumme basierend auf der Auswahl des Kontrollkästchens

Question

Ich entwickle eine einfache Anwendung zur Finanzverfolgung. Im Antrag gibt es eine Tabelle mit allen Spesenabrechnungen und außerhalb der Tabelle den Gesamtbetrag.

Ich versuche mit JS oder AJAX eine Möglichkeit zu finden, so dass ich, wenn ich ein Kontrollkästchen in einer Tabellenzeile auswähle, eine Rechnung in die Gesamtsumme einbeziehen/ausschließen kann und die Gesamtsumme automatisch aktualisiert wird, um den Ausschluss/die Einbeziehung widerzuspiegeln.

Tabellenzeilen werden dynamisch erstellt. Jedes Mal, wenn eine neue Rechnung hinzugefügt wird, werden die Zeilen also um eins erhöht, was bedeutet, dass die Kontrollkästchen-ID erhöht werden muss.

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

Ich habe ein bisschen JS

const checkbox = document.getElementById('myCheckbox')

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

Dies löst zwar die Warnung aus, wenn ein Kontrollkästchen ausgewählt ist, diese wird jedoch nur beim ersten Kontrollkästchen ausgelöst, da es sich um das Kontrollkästchen mit derselben ID handelt.

Das könnte also eine knifflige Aufgabe sein, da ich das Kontrollkästchen JS benötige, um zu wissen, wie hoch der Betrag für die Zeile ist, in der das Kontrollkästchen aktiviert ist, und um diese Zahl dann von der Gesamtsumme abzuziehen oder umgekehrt. Vielleicht ist das der falsche Ansatz?

Die Gesamtsumme wird angezeigt als:

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

Danke

Answer 1

你只需要委派

我必须在 h3 中展开你的 span，以免 JavaScript 变得非常混乱

给总数一个ID，这样比document.querySelector("h3.text-danger span")更容易。

此脚本不需要 ID

选中时包含

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