从复选框选择的表单人口

这是一个稍微简化的问题版本，以便于解释和缩短问题。从复选框选择的表单人口

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

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

来源

2012-08-29 leshank

所以...有什么问题吗？ – Polyov

你有没有给你的输入元素ID？这可能是您能够区分彼此的第一步。 –

你能告诉我们你试过什么吗？ – Touki

这里有一些东西让你开始。我不确定您的cert 1cert 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

来源

2012-08-29 15:47:42

从复选框选择的表单人口

回答

相关问题