从复选框选择的表单人口
这是一个稍微简化的问题版本,以便于解释和缩短问题。从复选框选择的表单人口
我有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中(虽然看起来像在屏幕上),但它们之间还有其他代码。
任何帮助/输入非常感谢,因为我大多只是制造一团糟!
回答:
这里有一些东西让你开始。我不确定您的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
以上是 从复选框选择的表单人口 的全部内容, 来源链接: utcz.com/qa/266932.html