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

＆＃13;

$(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);
    });
});

＆＃13;

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

＆＃13;

Answer 2

我假设您希望行是独立的：

＆＃13;

$(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);
    });
});

＆＃13;

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

＆＃13;

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

2 个答案: