总结复选框的值，并带有 - 最小选定条件

Question

我有一个包含X组的价格值为复选框的表单。 我已经为每个组分配了一个条件。

让我们假设我们有2组：

第一组条件：总和的所有值一起，除了第3选择 （NOT在索引中的第一个3，但选择的第一3和之后每选择）

第二组条件：总和的所有值一起，除了第2选择 （NOT第一2中的索引，但选择的第一2和之后每选择）

var minLimit1 = 3; 
var minLimit2 = 2; 

$(":input", "#myForm").each(function(){ 

    if(this.type == 'checkbox'){ 



    } 

}); 

我如何使用jQuery或普通js实现这一点？

编辑：样表CODE

<form id="myForm"> 
<fieldset class="required"> 
    <input type="checkbox" value="1.30" name="group1" id="id-1"> 
    <label for="id-1"><span>Component 1</span><em>(€1.30)</em></label> 

    <input type="checkbox" value="1.00" name="group1" id="id-2"> 
    <label for="id-2"><span>Component 2</span><em>(€1.00)</em></label> 

    <input type="checkbox" value="0.50" name="group1" id="id-3"> 
    <label for="id-3"><span>Component 3</span><em>(€0.50)</em></label> 

    <input type="checkbox" value="0.25" name="group1" id="id-4"> 
    <label for="id-4"><span>Component 4</span><em>(€0.25)</em></label> 

    <input type="checkbox" value="1.75" name="group1" id="id-5"> 
    <label for="id-5"><span>Component 5</span><em>(€1.75)</em></label> 

    <input type="checkbox" value="2.00" name="group1" id="id-6"> 
    <label for="id-6"><span>Component 6</span><em>(€2.00)</em></label> 
</fieldset> 

<fieldset class="required"> 
    <input type="checkbox" value="1.20" name="group2" id="id-7"> 
    <label for="id-7"><span>Component 1</span><em>(€1.20)</em></label> 

    <input type="checkbox" value="1.10" name="group2" id="id-8"> 
    <label for="id-8"><span>Component 2</span><em>(€1.10)</em></label> 

    <input type="checkbox" value="0.40" name="group2" id="id-9"> 
    <label for="id-9"><span>Component 3</span><em>(€0.40)</em></label> 

    <input type="checkbox" value="0.35" name="group2" id="id-10"> 
    <label for="id-10"><span>Component 4</span><em>(€0.35)</em></label> 

    <input type="checkbox" value="1.15" name="group2" id="id-11"> 
    <label for="id-11"><span>Component 5</span><em>(€1.15)</em></label> 

</fieldset> 
</form> 

注：我想要最新的点击并进一步在总结加入，而不是最后的指数。

Answer 1

我认为这个解决方案可以满足您的需求。演示添加类值的标签被计算为使其更容易determin这个概念是正确的

DEMO：http://jsfiddle.net/MTJtF/2

/* can store values in array, or as data attribute of html */ 

var min_limits = [3, 2]; 

$('#myForm .required input:checkbox').change(function() { 
    var $group = $(this).closest('fieldset.required') 
    var parentIdx = $('fieldset.required').index($group); 
    /* can store values in array, or as data attribute of html */ 
    var minLimit = $group.data('min_limit') || min_limits[parentIdx]; 
    var $selected = $group.find(':checked').slice(minLimit); 
    $group.find('.counted').removeClass('counted') 
    var sum = 0; 
    if ($selected.length) { 
     $selected.each(function() { 
      sum +=1*$(this).val(); 
      $(this).next().addClass('counted') 
     }) 

    } else { 
     sum = 'Limit not met'; 
    } 

    $group.find('.sum').text('Sum= '+sum) 

}) 

Answer 2

传递给$.each()的第一个参数是index，这在这里会有所帮助。

在这段代码中，我们假设您的复选框被fieldset元素与类"group1"，"group2"分组等

var conditions = { 
     group1: 3, 
     group2: 2 
    }, 
    total = 0, 
    key, condition; 

// Loop through all the conditions 
for (key in conditions) { 
    condition = conditions[key]; 
    // Loop through all the checked checkboxes in fieldset.group1, fieldset.group2, etc 
    $('input[type="checkbox"]:checked', '#myForm fieldset.' + key).each(function(inputIndex) { 
     // Check if the current checkbox's index is higher than the minimum 
     if ((inputIndex + 1) > condition) { 
      total += parseFloat($(this).val()); 
     } 
    }); 
} 

例子：http://jsfiddle.net/QfSxw/2/

编辑：简化代码相当

Answer 3

我我不知道我是否正确理解这些复选框的格式，但我假设您可以分辨第1组复选框和第2组复选框之间的区别。如果是这样，我会建议跟踪已标记的复选框的数量，以了解何时开始总结这些值。例如：

// The minimum number that must be checked 
var minLimit1 = 3; 
var minLimit2 = 2; 
// The number checked per group 
var numGroup1 = 0; 
var numGroup2 = 0; 
//The sum of the checkboxes over the group's minLimit that are checked 
var sumGroup1 = 0; 
var sumGroup2 = 0; 

$(":input", "#myForm").each(function() { 
    if ((this.type == 'checkbox') && (this.checked == true)) { 
     // This code is just for Group 1 right now. Depending on how you differentiate 
     // between each group, you could either have a check in here for each group 
     // (or some kind of loop if the number of groups is variable), or have a separate 
     // each statement for each group. 

     if (numGroup1 >= minLimit1) { 
      // If the minLimit has already been reached, then increment the sum 
      sumGroup1++; 
     } 

     numGroup1++; 
    } 
});