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

我需要计算值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>

最佳答案

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

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

关于javascript - jQuery-通过将其乘以复选框值来计算值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46749461/