Calcul valeur de checkbox

Version imprimable

Bonjour à tous,

je suis sur une page web ou j'ai un tableau avec un td avec id Option

Code:

1
2
3
4
5
6
7
8
9
10
<tr>
<td>Option</td>
<td id="option">
<p><input type="checkbox" id="option-1" name="option" value="1" price="500.00" onclick="calcAndShowTotal()">Option1|500.00</p>
<p><input type="checkbox" id="option-2" name="option" value="2" price="250.00" onclick="calcAndShowTotal()">Option2|250.00</p>
<p><input type="checkbox" id="option-3" name="option" value="3" price="100.00" onclick="calcAndShowTotal()">Option3|100.00</p>
<p><input type="checkbox" id="option-8" name="option" value="8" price="10000.00" onclick="calcAndShowTotal()">Option8|10000.00</p>
<p><input type="checkbox" id="option-9" name="option" value="9" price="5000.00" onclick="calcAndShowTotal()">Option9|5000.00</p>
<p><input type="checkbox" id="option-5" name="option" value="5" price="50.00" onclick="calcAndShowTotal()">Option5|50.00</p></td>
</tr>

je cherche a réaliser en jquery la somme de ces checkbox de attribue price , voici la fonction que j'ai préparé (en récupérant les informations sur internet)

Code:

1
2
3
4
5
6
7
8
9
          function calcAndShowTotal()
  {
	  alert("kkkkkkkkkk");
	      var total = 0;
    $('#option :input [type=checkbox]:checked').each(function(){
        total += parseFloat($(this).attr('price')) || 0;
		 alert(total);
    });
    $('#ttoption').val(total);

cela fonctionne pas.

Quelle erreur est-je commis?

merci d'avance pour votre aide

guigui69

07/03/2022, 18h46
NoSmoking
Bonjour,
il te faut réviser les sélecteurs CSS :mrgreen:
A la limite :

Code:

$('#option input[type=checkbox]:checked').each(function() {

oui mais pas

Code:

$('#option :input [type=checkbox]:checked').each(function(){

regarde la différence !

Remarques :
- lorsque l'on utilise jQuery il devrait être interdit de voir écrit
  
  Code:
  
  <nom-balise onclick="calcAndShowTotal()">
- dans la HTML, price="500.00" devrait plutôt être data-price="valeur", pour qu'il doit valide
08/03/2022, 08h03
guigui69

Bonjour NoSmoking,

je regarde ca

Par contre quand tu dis-ca

Citation:

lorsque l'on utilise jQuery il devrait être interdit de voir écrit

Il faudrait que je ré écrive comment ?

Citation:

Il faudrait que je ré écrive comment ?

sur base du HTML suivant :

Code:

<p><input type="checkbox" name="option" value="1" data-price="500">Option1|500.00</p>

Nota : les IDs servent à rien et l'attribut price devient data-price.

Cela peut se faire de la façon suivante une fois le document chargé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(function() { const $Options = $("[name='option']"); $Options.on("click", function() { let total = 0; $Options.each(function() { if (this.checked) { total += parseFloat($(this).data("price")) || 0; }; $('#ttoption').val(total.toFixed(2)); }) }); });
là on reste déjà plus dans l'esprit jQuery.

Bonjour à tous,
Effectivement comme le soulignait NoSmoking, il faut "data-price" comme nom d’attribut.
De plus pour gérer les clicks en JQuery l’attribut d'événement onclick des balises input est inutile.

Code:

1
2
3
4
5
6
<p><input type="checkbox" name="option" value="1" data-price="500.00">Option1|500.00</p>
<p><input type="checkbox" name="option" value="2" data-price="250.00">Option2|250.00</p>
<p><input type="checkbox" name="option" value="3" data-price="100.00">Option3|100.00</p>
<p><input type="checkbox" name="option" value="8" data-price="10000.00">Option8|10000.00</p>
<p><input type="checkbox" name="option" value="9" data-price="5000.00">Option9|5000.00</p>
<p><input type="checkbox" name="option" value="5" data-price="50.00">Option5|50.00</p>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var total= 0;
 
$(':input[type=checkbox]').on('click', function () {
    var price = parseFloat($(this).attr('data-price'));
 
    $(this).each(function () {
        if ($(this).is(':checked')) {
            total += price
        } else {
            total -= price
        }
    });
 
    console.log(total);
});

05/05/2022, 12h08
NoSmoking
Attention ton code souffre de « faiblesses » !
#1 ...

Code:

var total= 0;

Les variables globales sont à éviter autant que faire ce peux.

De plus si on réactualise de la page les <checkbox> ne sont pas forcément remis à l'état initial cela est surtout vrai avec FireFox.

#2 ...

Code:

var price = parseFloat($(this).attr('data-price'));

Il est préférable de mettre une valeur par défaut si il y a un oubli d'un attribut data-price dans le HTML ou alors dans ce cas cibler plus précisément les éléments.

#3 ...
Code:

1 2 3 $(this).each(function () { // les tests });
La boucle ne sert à rien le $(this) étant unique.
05/05/2022, 17h58
ASCIIDEFOND
Merci NoSmoking pour ces remarques constructives. 8-)
Code:

1 2 3 4 5 if ($(this).is(':checked')) { total += price } else { total -= price }
C'est mieux comme ça effectivement (une boulette). ;)

Il est vrai que Firefox est pénible à ne pas réinitialiser les valeurs par défaut. :(