Une case à cocher .modifier() événement n'est pas un incendie, et “tiré” par une autre case
-
21-12-2019 - |
Question
Je suis à l'aide d'une case à cocher pour vérifier toutes les autres cases à cocher dans un tableau.
Après une case à cocher en cours de vérification à l'INTÉRIEUR de la table (à changer) je résume chaque zone de texte valeur dans le même tr.
Il fonctionne bien sur Firefox et Chrome.
Sur IE11 et ci-dessous (il est important pour moi que cela fonctionne dans TOUS les navigateurs) le premier changement de la "toutes les" case à cocher juste les autres, mais ne pas additionner les valeurs textbox.
Sur le deuxième clic, il résume mais de décocher les cases à cocher.
De sorte qu'il fonctionne dans le mauvais sens parce que le premier "changement" est ignoré ou qqch.
Désolé pour mon mauvais anglais et de la mauvaise description.
<thead>
<tr>
<th>Auswahl <input type="checkbox" id="allcheck" /></th>
<th>Kunden-Nr.</th>
<th>Personal-Nr.</th>
<th>Vorname</th>
<th>Name</th>
<th>Gutscheintyp</th>
<th>Betrag €</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="left">1</td>
<td align="left">2</td>
<td align="left">3</td>
<td align="left">4</td>
<td align="left" class="typ">5</td>
<td align="center" class="texttd">
<input type="text" class="txt" maxlength="5" onclick="this.select()" value="20.00" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5"></th>
<th colspan="1"">Summe</th>
<th colspan="1" id="sum">0,00</th>
</tr>
</tfoot>
allcheck est l'id de la case, la vérification de tous les autres.:)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('input[type="checkbox"]').change(function() {
var sum = 0.00;
$("table tr td input:checked").each(function(){
test = $(this).closest('tr').find('input[type="text"]').val();
test = test.replace( ",",".");
if (isNaN(test)) {
sum = 0.00;
}
sum += parseFloat(test, 10);
$("#sum").html(sum.toString().replace(".",","));
});
sum = parseFloat(sum, 10);
sum = sum.toFixed(2);
$("#sum").html(sum.toString().replace(".",","));
});
J'espère que ces informations sont suffisantes pour que vous m'aidiez un peu.:)
La solution
semble que changer la propriété "cochée" ne déclenche pas toujours l'événement "Changer".
Vous devez donc déplacer votre calcul de somme en une fonction distincte et l'appelez explicitement dans "#allcheck", cliquez sur Handler
(a également nettoyé votre code un peu)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
updateSum();
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('tbody input[type="checkbox"]').change(updateSum);
function updateSum() {
var sum = 0.00;
$("tbody input:checked").each(function(){
var test = $(this).closest('tr').find('input[type="text"]').val();
var testNum = parseFloat(test.replace( ",", "."));
if (!isNaN(testNum)) {
sum += testNum;
}
});
$("#sum").text(sum.toFixed(2).replace(".",","));
}
Autres conseils
au lieu de click
cas d'utilisation change
événement pour tous les vérifier checbox.sur le changement de feu après le passage à la nouvelle valeur et this.checked
vous donnera la valeur correcte :
$('#allcheck').change(function() {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});