jquery- calculer une valeur totale après avoir rempli une case à cocher/radio/dropdown formulaire

Question

J'ai un formulaire de paiement avec trois sections. Fondamentalement, la première est une liste "radio" avec des multiplicateurs, la seconde est une liste "case à cocher" avec des valeurs définies, et la troisième est une liste déroulante avec des multiplicateurs ==>(jsfiddle). Pour plus de clarté, j'ai inséré une boîte de texte qui afficherait la valeur calculée totale.

Lorsque les utilisateurs remplissent ce formulaire, comment puis-je calculer et afficher le total?

J'ai essayé d'utiliser la réponse de dépassement de pile this, mais cela ne fonctionne pas du tout.

$('input').change(function(){ 
    var tot = 1; 
    $.each($('input'),function(){ 
     var curr_val = $(this).val(); 
     if(curr_val != ""){ 
      tot = tot * curr_val; 
      $('#total').val(tot); 
     } 
    }); 
}); 

Answer 1

Vous pouvez modifier votre sélection à ne comprennent pas le#total que vous ne voulez pas écouter son changement - $(':input').not('#total').change.

Vous pouvez utiliser une fonction jquery pour obtenir la matrice de boîtes cochées.

L'étape suivante serait de multiplier tous - en utilisant #reduce() fonction pour ajouter le tableau.

Voir la démo ci-dessous:

$(':input').not('#total').change(function() { 
 
    var tot = 1; 
 

 
    var s1 = +$('input[name=section1]:checked').val(); 
 
    var s2 = $('input[name=section2]:checked').map(function() { 
 
    return +$(this).val(); 
 
    }).get(); 
 
    var s3 = +$('select').val(); 
 
    $('#total').val(s1 * (s2.reduce(function(p,c){ 
 
    return p + c; 
 
    },0) || 1) * s3); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action=""> 
 
    <div id="section1">Section 1 
 
    <br><input type="radio" name="section1" value="2"> x2 
 
    <br><input type="radio" name="section1" value="1.5"> x1.5 
 
    <br><input type="radio" name="section1" value="1.5"> x1.5 
 
    <br><input type="radio" name="section1" value="1.5"> x1.5 
 
    <br><input type="radio" name="section1" value="1"> x1 
 
    <br><input type="radio" name="section1" value="1"> x1 
 
    </div> 
 
    <br> 
 
    <div id="section2">Section 2 
 
    <br><label><input type="checkbox" name="section2" value="4"><span>1</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>2</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>3</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>4</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>5</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>6</span></label> 
 
    <br><label><input type="checkbox" name="section2" value="4"><span>7</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>8</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>9</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>10</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>11</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>12</span></label> 
 
    </div> 
 
    <br> 
 
    <div>Section 3<br> 
 
    <select> 
 
    <option value="7">1 week</option> 
 
    <option value="14">2 weeks</option> 
 
    <option value="21">3 weeks</option> 
 
    <option value="28">4 weeks</option> 
 
    </select> 
 
    </div> 
 
    <input type="text" value="0" id="total"> 
 
</form>