jQuery - 通过将其乘以复选框值来计算该值

Question

我需要计算值total，它是初始值（比方说10）和因子A，B，C和D的乘积，它们等于，比方说2,3,4和5.

这些因素的组合应该由用户通过选中相应的框来选择。问题是我需要在表单中独立重复这么多次，下面的解决方案（对于这些部分中的两个）不能正确分离该过程。如果这些是文本值，我会做例如var $text = $(".result", $section);

基本上，我不明白如何将数值变量与这些部分联系起来。另外，即使没有选中任何一个框，在Result字段中具有该初始值（10）也是非常好的。

$(document).ready(function() {   
 
    $(".factor-checkbox").click(function(event) { 
 
     var $section = $(this).closest(".section"); 
 
     var total = 10; 
 
     $(".factor-checkbox:checked").each(function() { 
 
      total *= parseInt($(this).val()); 
 
     }); 
 
     
 
      $('.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" 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" class="result"></label> 
 
    
 
</div>

Answer 1

我假设你要对行独立：

$(document).ready(function() {   
 
    $(".factor-checkbox").click(function(event) { 
 
     var $section = $(this).closest(".section"), 
 
      initial = parseInt($section.find('.result').data('initial')), 
 
      total = initial; 
 
     $section.find("input:checked").each(function() { 
 
      total *= parseInt($(this).val()); 
 
     }); 
 
     $section.find('.result').val(total === initial ? initial : total); 
 
     
 
    }); 
 
    // getting the total values 
 
    $(".res_button").click(function() { 
 
     var $section = $(this).closest(".section"); 
 
     var total = $section.find('.result').val(); 
 
     console.log(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" data-initial="10" value="10" class="result"></label> 
 
    
 
    <label><button class="res_button">Result 1 line</button></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" data-initial="20" value="20" class="result"></label> 
 

 
    <label><button class="res_button">Result 2 line</button></label> 
 
</div>

Answer 2

$(document).ready(function() {   
 
    $(".factor-checkbox").click(function() { 
 
     var $section= $(this).closest(".section") 
 
     var total = 10; 
 
     $section.find(".factor-checkbox: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="10" class="result"></label> 
 
    
 
</div>