Discussion :

[guigui69]

Bonjour à tous,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,
il te faut réviser les sélecteurs CSS
A la limite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

oui mais pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#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 :

  Sélectionner tout - Visualiser dans une fenêtre à part

  <nom-balise onclick="calcAndShowTotal()">

• dans la HTML, price="500.00" devrait plutôt être data-price="valeur", pour qu'il doit valide

[guigui69]

Bonjour NoSmoking,

je regarde ca

Par contre quand tu dis-ca

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

Il faudrait que je ré écrive comment ?

[NoSmoking]

Il faudrait que je ré écrive comment ?

sur base du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[ASCIIDEFOND]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});

[NoSmoking]

Attention ton code souffre de « faiblesses » !
#1 ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(this).each(function () {
    // les tests
});

La boucle ne sert à rien le $(this) étant unique.

[ASCIIDEFOND]

Merci NoSmoking pour ces remarques constructives.

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

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.