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>