Effectuer une multiplication avec jQuery en fonction de la case à cocher et des sélections déroulantes

Question

Je dois effectuer un calcul mathématique basé sur un utilisateur sélectionnant une option déroulante et des choix dans les cases à cocher de mon formulaire d'inscription.

J'ai une liste déroulante option "Type d'inscription requise" et contient deux options:

• Sélection (25 £ par mois par unité de surface)
• standard (£ 10 par mois et par région)

Nous avons également 3 articles de cases à cocher en dessous cette liste déroulante qui sont étiquetés « Quelle région/zones servez-vous? »:

• Altrincham
• Hale
• Vente

Une fois qu'un utilisateur a choisi une option « Type d'inscription nécessaire » et leurs choix de « Quelle région/zones servez-vous? » Je veux leur montrer un prix total avant le bouton de soumission.

Le calcul est (« Type d'inscription requise ») multiplié par le nombre de (« Quelle région/domaines-vous servir? »)

Ainsi, si un utilisateur sélectionne « Standard (£ 10 par mois et par zone) "puis coche ALL 3 options de case à cocher (Altrincham, Hale, Sale) Je veux montrer un message qui dit" Le coût total est de 30 £ par mois ". Ce serait le résultat de 10 fois 3.

£ Si un utilisateur sélectionne « Sélection (25 £ par mois et par zone) » tiques puis TOUTES 2 options de cases à cocher (Altrincham, Sale) Je veux montrer un message dit "Le coût total est de 50 £ par mois". Ce serait le résultat de £ 25 fois 2.

Si un utilisateur sélectionne « Sélection (25 £ par mois et par zone) » tiques puis TOUTE option 1 case à cocher (Hale) Je veux montrer un message qui dit " Le coût total est de 25 £ par mois ". Ce serait le résultat de £ 25 fois 1.

Comment est-ce que j'irais à ce sujet dans jQuery?

Merci

Answer 1

La façon dont vous pouvez le résoudre est d'avoir une fonction qui lit toutes les valeurs dont vous avez besoin dans différentes variables.

Ensuite, vérifiez chaque variable pour la valeur attendue et faites les calculs en conséquence. Yoy stockera le résultat dans une autre variable.

Enfin, vous définissez la valeur de l'élément d'interface utilisateur à l'aide de la variable.

Comment déclencher cette fonction?

Il peut être fait sur la base appuyant sur un bouton, ou lorsque la valeur d'un élément est modifié. Dans le premier cas, vous utiliserez $(). Click (function() {...}) et dans le second cas $(). Change (function() {...}).

Pour obtenir la valeur d'un élément que vous utilisez $(). Val() et pour le régler, le même, mais le passage d'une valeur dans la fonction (val (newValue)).

Résumer:

$(document).ready(function(){ 

function doCalculations(){ 
    var input1 = $(input1selector).val(); 
    ... 
    var result = 0; 
    if(){ 
     ... 
     result = ...; 
    }else if() { 
     ... 
     result = ...; 
    }else{ 
     ... 
     result = ...; 
    } 

    $(uiOutputSelector).val(result); 
}; 

$(calcButtonSelector).click(function(){ 
    doCalculations(); 
}); 


}); 

Answer 2

Vous ne se soucient pas des villes qui ont été vérifiées, combien d'entre eux.

Vous pouvez écouter l'événement change sur les trois cases à cocher pour chaque case à cocher, vous pouvez incrémenter le compte lorsqu'il est coché et le décrémenter lorsqu'il n'est pas coché.

Après avoir modifié le compte, vous pouvez appeler une fonction qui rend le total si le total est> 1 ou masquer/supprimer le prix total si le total est 0.

Bien sûr, je ne vais pas écrire tout code pour vous puisque je ne sais pas à quoi ressemble votre balisage et quel code JavaScript vous avez peut-être déjà écrit.