javascript - 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>