1

これは、説明を簡単にするために問題をやや単純化したもので、質問を短くしています。

X個のチェックボックスがあります:

<input type="checkbox" class="checker" value="1" />
<input type="checkbox" class="checker" value="2" />
<input type="checkbox" class="checker" value="3" />
...

Y 個の入力フィールド (X > Y) の証明書とコストの 2 つの列があり、下部に合計があります。

<input type="text" class="cert" /><input type="text" class="cost">
<input type="text" class="cert" /><input type="text" class="cost">
<input type="text" class="cert" /><input type="text" class="cost">
...

<input type="text" id="total" />

ユーザーは、チェックボックスの任意の組み合わせを選択できます (上限 Y まで)。チェックボックスが選択されると、その値が最初の空の証明書入力に入力されます。証明書の値に応じて、対応するコストが隣接するコスト入力に入れられます (たとえば、証明書 1 = コスト 50、証明書 2 = コスト 100 など)。

チェックボックスのチェックを外すと、コストと同様に、対応する証明書がクリアされます。

下部の合計は、何かへの変更の実行中の合計を保持します。

いくつかの追加メモ:

  • チェックボックスは、1 つの連続したシーケンスではなく、フォーム全体に間隔を空けて配置されています。
  • 同様に、cert と cost の入力は実際には html で横に並んでいません (画面には表示されますが)、それらの間に他のコードがあります。

私はほとんど混乱を引き起こしているだけなので、どんな助けや意見も大歓迎です！

4

1 に答える 1

1

ここから始めましょう。あなたcert 1 cert 2がテキストボックスの中に入っているのか、それともラベルなどがあるのか​​ わかりません。あなたの費用と同じです。しかし、それは私が例で行った方法です。これは、一連の入力 (証明書とコスト) と同じ数のチェックボックスがあることを前提としています。

$('input.checker').change(function(){
    // store the current index so we can pick which text input to change
    var $i = $(this).index('input.checker');
    // put val in corresponding cert text input
    $('input.cert').eq($i).val(this.checked ? 'cert ' + ($i+1) : '');
    // put val in corresponding .cost text input
    $('input.cost').eq($i).val(this.checked ? 'cost ' + (50 * ($i+1)) : '');

    var total = 0;
    // loop through the cost inputs and add up total
    $('input.cost').each(function(i,v){
        total += (+$(v).val().replace('cost ',''));
    });
    // insert total
    $('#total').val(total);
});​

フィドルの例

于 2012-08-29T15:47:42.780 に答える