jQuery

Question

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

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

基本上，我不明白如何将数值变量与这些部分联系起来。此外，即使选中 none 个框，在 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() {
       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>

Answer 2

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

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

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

jQuery - Calculate the value by multiplying it by the checkbox values

html

javascript

cakephp-3.0