Question

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

A，B，C和D是因素，让我们说2,3,4和5。

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

用户应通过选中相应的框选择因子组合，但他们选择的组合应包含在上面的字符串中。如果没有，用户应该可以从下拉菜单中选择允许的组合。后一个操作应自动检查相应的框，从而计算total所需的值。

我需要在表单中多次重复这一操作，并且在从html属性＆＃34; value＆＃34;中读取total的不同初始值的阶段我遇到了困难。当前版本忽略了，因为我在jQuery中设置了total = 10。

＆＃13;

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

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

＆＃13;

Answer 1

这是我的方法

＆＃13;

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

＆＃13;

input.initial{

}

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

＆＃13;

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

基本思想是检查是否允许所选组合（组合存在＆＃34; AB BCD C AD ABCD ......＆＃34;）。如果选择中没有组合，我们需要向用户显示一个包含可用组合的选择框。

See on jsFiddle

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

2 个答案: