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，等等）。

如果未选中复选框，则会清除相应的证书以及成本。

底部的总数保持对任何事物的更改的运行总数。

一些附加说明：

  • 复选框在整个表单中是间隔的，而不是一个连续的顺序。
  • 同样，证书和成本输入实际上并没有在 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 回答