通过复选框选择形成填充

Form population from checkbox selection

本文关键字：填充 选择 复选框      更新时间：2023-09-26

这是一个稍微简化的问题版本，使其更容易解释，问题更短。

我有X个复选框：

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

我有两列，cert和cost，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）。选中复选框后，它的值将输入到第一个空证书输入中。根据cert值，相应的成本然后被放入相邻的成本输入中（例如cert 1＝成本50，cert 2＝成本100，等等）。

如果取消选中复选框，则清除相应的证书，成本也是如此。

底部的总和保持对任何事物的更改的连续总和。

一些附加说明：

  • 复选框在整个表单中间隔开，而不是按一个连续的顺序排列
  • 类似地，证书和成本输入实际上并没有在html中并排（尽管看起来确实在屏幕上），它们之间还有其他代码

非常感谢任何帮助/意见，因为我大部分时间都只是在制造混乱！

以下是您开始学习的内容。我不确定你的cert 1 cert 2是在文本框里，还是有标签之类的。与您的成本相同。但我在这个例子中就是这样做的。这是假设您有与输入集（cert&cost）相同数量的复选框；

$('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);
});​

示例FIDDLE

相关文章：