これは、説明を簡単にするために問題をやや単純化したもので、質問を短くしています。
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 で横に並んでいません (画面には表示されますが)、それらの間に他のコードがあります。
私はほとんど混乱を引き起こしているだけなので、どんな助けや意見も大歓迎です!