0

価格値を持つチェックボックスのグループがX個あるフォームがあります。各グループに1つの条件を割り当てました。

2つのグループがあると仮定しましょう。

最初のグループ条件：選択された最初の3つを除くすべての値を合計します（インデックスの最初の3つではなく、最初の3つが選択され、その後のすべての選択）

2番目のグループ条件：選択された最初の2つを除くすべての値を合計します（インデックスの最初の2つではなく、最初の2つが選択され、その後のすべての選択）

var minLimit1 = 3;
var minLimit2 = 2;

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

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



    }

});

jQueryまたはプレーンjsを使用してそれを実装するにはどうすればよいですか？

編集：サンプルフォームコード

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

注：インデックスの最後ではなく、最後にクリックされたものを要約に追加したい。

4

3 に答える 3

1

このソリューションはあなたが必要とすることをするのだと思います。デモは、計算される値のラベルにクラスを追加して、概念が正しいことを簡単に判断できるようにします

デモ：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)

})

</ p>

于 2012-10-20T20:06:47.590 に答える
0

に渡される最初のパラメータ$.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/

編集：コードを大幅に簡素化しました

于 2012-10-20T13:01:13.453 に答える
0

これらのチェックボックスの形式を正しく理解しているかどうかはわかりませんが、グループ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++;
    }
});
于 2012-10-20T13:02:10.223 に答える