Titre révisé : Calculer le total en fonction de la sélection d'une case à cocher

Question

Je développe une application simple de suivi financier. Dans l'application, il y a un tableau avec toutes les notes de frais puis le montant total situé en dehors du tableau.

J'essaie de trouver un moyen d'utiliser JS ou AJAX pour que lorsque je coche 1 case dans une ligne de tableau, je puisse inclure/exclure une facture du total et mettre à jour automatiquement le total pour refléter l'exclusion/inclusion.

Les lignes du tableau sont créées dynamiquement, donc chaque fois qu'une nouvelle facture est ajoutée, les lignes s'incrémentent, ce qui signifie que l'ID de la case à cocher doit être incrémenté.

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

J'ai un peu de JS

const checkbox = document.getElementById('myCheckbox')

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

Cela déclenche l'alerte lorsqu'une case est cochée, mais cela ne se déclenchera que sur la première case puisque c'est celle avec le même ID.

Cela pourrait donc être une tâche délicate car j'ai besoin de la case à cocher JS pour savoir quel est le montant de la ligne avec la case à cocher cochée, puis soustraire ce nombre du total ou vice versa. Peut-être que ce n’est pas la bonne approche ?

Le total s'affiche comme suit :

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

Merci

Answer 1

Il vous suffit de déléguer

Je dois étendre votre span en h3 pour éviter que JavaScript ne devienne vraiment compliqué

Donnez une pièce d'identité au total, c'est plus facile que document.querySelector("h3.text-danger span").

Ce script ne nécessite pas d'identifiant

Inclure une fois sélectionné

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