Ajout écouteur case versement

Calcul et affichage total des lignes cochées

FossilOrigin-Name: d8e436ba77f939fa0aa475bfcffc0ca23a9ad9ec0861d9bbee615ff36761a79f
This commit is contained in:
engel 2022-01-14 19:26:00 +00:00
parent 358becfca7
commit 31a0f8fdc3
2 changed files with 48 additions and 7 deletions

View File

@ -84,14 +84,19 @@
<?php $idVersements = $versement->idTarif."_".$versement->idUser; ?> <?php $idVersements = $versement->idTarif."_".$versement->idUser; ?>
<h3>Versements de {$versement.Nom} : <span id="total_{$idVersements}">0,00 €</span></h3> <h3>Versements de {$versement.Nom} : <span id="total_{$idVersements}">0,00 €</span></h3>
<fieldset class="versements" id="versements_{$idVersements}"> <fieldset class="versements" id="versements_{$idVersements}">
<input class="check_{$idVersements}" type="checkbox" id="check_{$idVersements}" onclick="cocherDecocherPersonne(check_{$idVersements}, total_{$idVersements})" /> <input class="check_{$idVersements}"
<label for="check_{$idVersements}" style="font-weight:bold;">Cliquer ici pour sélectionner toutes les lignes</label><br /> type="checkbox" id="check_{$idVersements}"
onclick="cocherDecocherPersonne(check_{$idVersements}, total_{$idVersements})" />
<label for="check_{$idVersements}" style="font-weight:bold;">Cliquer ici pour cocher toutes les lignes</label><br />
<hr> <hr>
<?php $currentUser = $versement->idUser; ?> <?php $currentUser = $versement->idUser; ?>
{/if} {/if}
{* afficher les infos du versement de la personne*} {* afficher les infos du versement de la personne*}
<input class="check_{$idVersements}" type="checkbox" name="selected[]" value={$rang}> <input class="check_{$idVersements}" type="checkbox"
<label for={$rang}></label> id="check_{$idVersements}_{$rang}"
name="selected[]" value={$rang}
onclick="cocherDecocherVersement(check_{$idVersements}_{$rang}, total_{$idVersements})" />
<label for=check_{$idVersements}_{$rang}></label>
<span class="montant">{$versement.Versement}</span> <span class="montant">{$versement.Versement}</span>
<span>{$versement.Date|date_format:"%d/%m/%Y"}</span><br /> <span>{$versement.Date|date_format:"%d/%m/%Y"}</span><br />
{/if} {/if}

View File

@ -1,7 +1,7 @@
/** /**
* Fonction appelée quand on ()coche la case d'une personne * Fonction appelée quand on ()coche la case d'une personne
* - ()sélectionner toutes les cases à cocher * - ()sélectionner toutes les cases à cocher
* - faire le total des cases cochées * - faire le total des cases cochées et l'afficher
* *
* @param id de la case qui a été cochée * @param id de la case qui a été cochée
* @param id de l'élément afficher le total * @param id de l'élément afficher le total
@ -11,10 +11,46 @@ function cocherDecocherPersonne(idCase, idTotal) {
var fieldset = idCase.closest("fieldset"); var fieldset = idCase.closest("fieldset");
var listeCheck = fieldset.getElementsByTagName("input"); var listeCheck = fieldset.getElementsByTagName("input");
var listeMontants = fieldset.querySelectorAll("span.montant"); var listeMontants = fieldset.querySelectorAll("span.montant");
var total = 0;
for (var i = 1; i < listeCheck.length; ++i) for (var i = 1; i < listeCheck.length; ++i)
{ {
listeCheck[i].checked = listeCheck[0].checked; listeCheck[i].checked = listeCheck[0].checked;
}
// changer le message
var message = idCase.nextElementSibling;
if (idCase.checked) {
message.innerHTML = "Cliquer ici pour dé-cocher toutes les lignes";
} else {
message.innerHTML = "Cliquer ici pour cocher toutes les lignes";
}
// calculer et afficher le total
calculerTotal(listeCheck, listeMontants, idTotal);
}
/**
* Fonction appelée quand on ()coche la case d'un versement
* - ()sélectionner cette case (?)
* - faire le total des cases cochées et l'afficher
*
* @param id de la case qui a été cochée
* @param id de l'élément afficher le total
*/
function cocherDecocherVersement(idCase, idTotal) {
var fieldset = idCase.closest("fieldset");
var listeCheck = fieldset.getElementsByTagName("input");
var listeMontants = fieldset.querySelectorAll("span.montant");
calculerTotal(listeCheck, listeMontants, idTotal);
}
/**
* Faire le total des cases cochées et l'afficher
* @param listes des cases
* @param listes des montants associés
* @param id de l'élément afficher le total
*/
function calculerTotal(listeCheck, listeMontants, idTotal) {
var total = 0;
for (var i = 1; i < listeCheck.length; ++i)
{
if (listeCheck[i].checked) { if (listeCheck[i].checked) {
total += Number(listeMontants[i-1].textContent); total += Number(listeMontants[i-1].textContent);
} }
@ -29,7 +65,7 @@ function cocherDecocherPersonne(idCase, idTotal) {
* Cocher/décocher toutes les cases d'un tableau * Cocher/décocher toutes les cases d'un tableau
* en fonction de l'état de la première (ligne d'entête) * en fonction de l'état de la première (ligne d'entête)
* @param evt : événement déclencheur * @param evt : événement déclencheur
* @remarks : est remplacé par la foncion cocherDecocher ci-dessus * @remarks : est remplacé par la fonction cocherDecocherPersonne ci-dessus
*/ */
function cocherDecocher_old(evt) { function cocherDecocher_old(evt) {
console.log("this = " + this.className); console.log("this = " + this.className);