jQuery - Multiplie la valeur dans le formulaire avec les facteurs (prédéfinis) donnés par les valeurs de case à cocher

Question

J'ai une chaîne qui est une séquence de combinaisons comme ceci: "AB BCD C AD ABCD ...".

A, B, C et D sont les facteurs, disons 2, 3, 4 et 5.

je besoin de calculer la valeur total, qui est un produit de valeur initiale (10 ou 20 dans la exemple html ci-dessous) et ces facteurs.

La combinaison de facteurs doit être sélectionnée par l'utilisateur en cochant les cases correspondantes, mais la combinaison choisie doit être contenue dans la chaîne ci-dessus. Si ce n'est pas le cas, l'utilisateur doit avoir la possibilité de sélectionner la combinaison autorisée dans le menu déroulant. Cette dernière action devrait vérifier automatiquement les cases correspondantes et ainsi calculer la valeur nécessaire de total. J'ai besoin de cela répété plusieurs fois dans le formulaire et je suis resté bloqué à l'étape de lecture des différentes valeurs initiales de total à partir de l'attribut html "value". La version actuelle ne tient pas compte du fait que j'ai défini total = 10 dans jQuery.

$(document).ready(function() {   
 
    $(".factor-checkbox").click(function(event) { 
 
     var $section = $(this).closest(".section"), 
 
      total = 10; 
 
     $section.find("input:checked").each(function() { 
 
      total *= parseInt($(this).val()); 
 
     }); 
 
     $section.find('.result').val(total); 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" value="10" class="result"></label> 
 
    
 
</div> 
 

 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" value="20" class="result"></label> 
 
    
 
</div>

Answer 1

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="section"> 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 

    <!-- select box with available combinations (can be baked through JS) --> 
    <select style="display:none" class='helperBox'> 
     <option val=''>Available Combos</option> 
     <option val='AB'>AB</option> 
     <option val='BCD'>BCD</option> 
     <option val='C'>C</option> 
     <option val='AD'>AD</option> 
     <option val='ABCD'>ABCD</option> 
    </select>   
    <label>Result <input type="text" value="10" class="result"></label>  
</div> 

<div class="section"> 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
    <select style="display:none" class='helperBox'> 
     <option val=''>Available Combos</option> 
     <option val='AB'>AB</option> 
     <option val='BCD'>BCD</option> 
     <option val='C'>C</option> 
     <option val='AD'>AD</option> 
     <option val='ABCD'>ABCD</option> 
     </select>    
    <label>Result <input type="text" value="20" class="result"></label>  
</div> 

JavaScript

$(document).ready(function() {   

    // combo list 
    var combos = ['AB', 'BCD', 'C', 'AD', 'ABCD']; 

    $(".factor-checkbox").click(function(event) { 
     var $section = $(this).closest(".section"); 
     var $total = $section.find('.result'); 
     total = calculateTotal($section);   
     $total.val(total); 
    });  

    // combo selection box logic 
    $('.helperBox').change(function(){  
     var $section = $(this).closest(".section"); 
     var $options = $section.find("input[type=checkbox]"); 
     var selectedCombo = $(this).val();   // current selected value 
     var selectionArray = selectedCombo.split(''); // break current selected value into names 

      //iterate available options 
     $options.each(function(i,child){  

      // if name is present check it, else uncheck it 
      if($.inArray(child.name,selectionArray) > -1) {   
       $(child).prop('checked',true);   
      } else { 
       $(child).prop('checked',false); 
      } 
     }) 

     // set new total and hide the combination select box 
     var $total = $section.find('.result'); 
     total = calculateTotal($section);   
     $total.val(total); 
     $(this).hide(); 
    }); 

    function calculateTotal($section) { 
     var $total = $section.find('.result'); 

     // get default value of input field 
     total = parseInt($total.attr('value'));   

     // if allowed calulate total, elseshow help selection 
     if(validateCombo($section) > -1) {    
      $section.find("input:checked").each(function() {  
      total *= parseInt($(this).val()); 
      });   
     } else { 
      $section.find('.helperBox').show(); 
     } 

     return total; 
    } 

    // check if selected combination is allowed, returns -1 if not allowed 
    function validateCombo(parent) { 
     var comboString = '';  

     parent.find('input[type=checkbox]').each(function(i,child){ 
     if($(child).is(':checked')) 
      comboString += child.name; 
     });  
     return $.inArray(comboString,combos); 
    }    
}); 

L'idée de base est de vérifier si la combinaison choisie est autorisée (est présent en combinaison "AB BCD C AD ABCD ..."). Si la combinaison n'est pas présente dans la sélection, nous devons montrer à l'utilisateur une boîte de sélection avec les combinaisons disponibles.

See on jsFiddle

Answer 2

Voilà mon approche

$(document).ready(function() {   
 
     $(".factor-checkbox").click(function(event) { 
 
      var $section = $(this).closest(".section"); 
 
      
 
      if ($section.find("input:checked").length>0) 
 
      { 
 
       total = $section.find('.result').val(); 
 
       initial = total; 
 
       
 
       
 
      $section.find("input:checked").each(function() { 
 
       total *= parseInt($(this).val()); 
 
      }); 
 
      $section.find('.result').val(total); 
 
      }else { 
 
      total = $section.find('.result').val(initial); 
 
      } 
 
      
 
     }); 
 
     }); 
 
    

input.initial{ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="section"> 
 
     <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
     <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
     <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
     <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
     <label>Result <input type="text" value="10" class="result"> 
 
     
 
     </label> 
 
     
 
    </div> 
 

 
    <div class="section"> 
 
     <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
     <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
     <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
     <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
     <label>Result <input type="text" value="20" class="result"> 
 
     
 
     </label> 
 
     
 
    </div>