總結複選框的值，並帶有 - 最小選定條件

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