Question

这是一个稍微简化的问题版本，以便于解释和缩短问题。

我有X复选框：

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

我有2列，证书和费用，Y个输入字段（X> Y），然后是底部的总数：

<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中的并排（虽然看起来确实在屏幕上），但它们之间还有其他代码。

非常感谢任何帮助/输入，因为我主要只是制造一团糟！

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

EXAMPLE FIDDLE

从复选框选择中填写表格

1 个答案: