jQuery

Question

我有一个字符串，它是这样的组合序列："AB BCD C AD ABCD..."。

A、B、C 和 D 是因数，比方说 2、3、4 和 5。

我需要计算值 total，它是初始值（下面 html 示例中的 10 或 20）与这些因素的乘积。

因素的组合应由用户通过选中相应的框来 select 编辑，但它们 select 的组合应包含在上面的字符串中。如果没有，用户应该可以从下拉菜单中选择 select 允许的组合。后一个动作应自动选中相应的框，从而计算出 total.

所需的值

我需要在表单中重复多次，但我卡在了从 html 属性 "value" 中读取 total 的不同初始值的阶段。当前版本忽略了这一点，因为我在 jQuery.

中设置了 total = 10

$(document).ready(function() {        
    $(".factor-checkbox").click(function(event) {
        var $section = $(this).closest(".section"),
            total = 10;
        $section.find("input: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="20" class="result"></label>
    
</div>

Answer 1

这是我的方法

  $(document).ready(function() {        
        $(".factor-checkbox").click(function(event) {
            var $section = $(this).closest(".section");
          
            if ($section.find("input:checked").length>0)
            { 
               total = $section.find('.result').val();
               initial = total;
              
             
            $section.find("input:checked").each(function() {
                total *= parseInt($(this).val());
            });
            $section.find('.result').val(total);
            }else {
            total = $section.find('.result').val(initial);
            }
            
        });
        });

input.initial{

}

    <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="20" class="result">
      
        </label>
        
    </div>

Answer 2

HTML

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

    <!-- select box with available combinations (can be baked through JS) -->
    <select style="display:none" class='helperBox'>
        <option val=''>Available Combos</option>
        <option val='AB'>AB</option>
        <option val='BCD'>BCD</option>
        <option val='C'>C</option>
        <option val='AD'>AD</option>
        <option val='ABCD'>ABCD</option>
     </select>        
     <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>
    <select style="display:none" class='helperBox'>
        <option val=''>Available Combos</option>
        <option val='AB'>AB</option>
        <option val='BCD'>BCD</option>
        <option val='C'>C</option>
        <option val='AD'>AD</option>
        <option val='ABCD'>ABCD</option>
      </select>            
    <label>Result <input type="text" value="20" class="result"></label>    
</div>

JavaScript

$(document).ready(function() {        

    // combo list
    var combos = ['AB', 'BCD', 'C', 'AD', 'ABCD'];

    $(".factor-checkbox").click(function(event) {
        var $section = $(this).closest(".section");
        var $total = $section.find('.result');
        total = calculateTotal($section);        
        $total.val(total);
    });       

    // combo selection box logic
    $('.helperBox').change(function(){      
        var $section = $(this).closest(".section");
        var $options = $section.find("input[type=checkbox]");
        var selectedCombo = $(this).val();          // current selected value
        var selectionArray = selectedCombo.split('');   // break current selected value into names

            //iterate available options
        $options.each(function(i,child){      

            // if name is present check it, else uncheck it
            if($.inArray(child.name,selectionArray) > -1) {         
                $(child).prop('checked',true);          
            } else {
                $(child).prop('checked',false);
            }
        })

        // set new total and hide the combination select box
        var $total = $section.find('.result');
        total = calculateTotal($section);        
        $total.val(total);
        $(this).hide();
    });

    function calculateTotal($section) {
        var $total = $section.find('.result');

        // get default value of input field
        total = parseInt($total.attr('value'));        

        // if allowed calulate total, elseshow help selection  
        if(validateCombo($section) > -1) {              
            $section.find("input:checked").each(function() {      
            total *= parseInt($(this).val());
            });         
        } else {
            $section.find('.helperBox').show();
        }

        return total;
    }

    // check if selected combination is allowed, returns -1 if not allowed
    function validateCombo(parent) {
        var comboString = '';      

      parent.find('input[type=checkbox]').each(function(i,child){
        if($(child).is(':checked'))
            comboString += child.name;
      });      
      return $.inArray(comboString,combos);
    }               
});

基本思路是检查所选组合是否被允许（组合 "AB BCD C AD ABCD..." 中存在）。如果选择中不存在该组合，我们需要向用户显示一个包含可用组合的选择框。

See on jsFiddle

jQuery - 将表单中的值乘以复选框值给出的（预定义）因子

jQuery - Multiply the value in the form with (predefined) factors given by checkbox values

html

javascript

cakephp-3.0