求和来自输入的多个值,并在形式中进行选择
sum multiple values from inputs and selects in form
我需要将多个SELECTS和INPUTS的值相加,这就是我目前所拥有的:
HTML
<label>Item#1</label>
<select name="price[]" id="sel_1">
<option value="">Options</option>
<option value="4.00">Small</option>
<option value="8.00">Medium</option>
</select>
<br>
<label>Item#2</label>
<select name="price[]">
<option value="">Options</option>
<option value="4.00">Small</option>
<option value="8.00">Medium</option>
</select>
<br>
<label>Item#3</label>
<select name="price[]">
<option value="">Options</option>
<option value="4.00">Small</option>
<option value="8.00">Medium</option>
</select>
<br>
<label>Item#4</label>
<input type="checkbox" value="1.00" id="price[3]" name="price[]">
<br>
<label>Item#5</label>
<input type="checkbox" value="2.00" id="price[3]" name="price[]">
<br>
<label>Item#6</label>
<input type="checkbox" value="3.00" id="price[3]" name="price[]">
<br> <span id="usertotal"> </span>
查询
$('input:checkbox').change(function () {
var tot = 0;
$('input:checkbox:checked').each(function () {
tot += Number($(this).val());
});
tot += Number($('#sel_1').val());
$('#usertotal').html(tot)
});
$('#sel_1').change(function () {
$('input:checkbox').trigger('change');
});
正如你可以注意到的,它只对第一次选择的值求和,我需要它也对所有选择求和。
演示:http://jsfiddle.net/B9ufP/
试试这个:
(我简化了你的代码)
(function ($) {
var $total = $('#usertotal');
$('input,select:selected').on('change', function () {
var tot = 0;
$(':checked, select').each(function () {
tot += ~~this.value;
});
$total.html(tot)
});
}(jQuery))
演示此处
如果你想变得花哨,你也可以使用Array.prototype.reduce
来汇总这些值。
请注意,如果您有小数,请使用parseFloat
。
var total = [].reduce.call($('select, :checkbox:checked'), function (pv, cv) {
return parseFloat(pv.value) + parseFloat(cv.value);
});
相关文章:
- 从动态创建的html选择中选择所选选项
- 可以'选择单选输入时,不要提交带有JavaScript功能的表单
- 如果选择单选按钮,则显示字段
- 如何取消选择所选选项并将JqueryMobile中选择的值刷新为1st
- 选择单选按钮更新2个输入字段
- 如果选择单选按钮,则显示表单
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 选择单选按钮时显示更新按钮
- 选择单选按钮时显示或隐藏窗体
- ui.grid 行无法选择行
- 如何使用Greasemonkey自动选择单选按钮
- 如何通过单击选项而不是实际按钮本身来选择单选按钮
- JavaScript - 如果选中任何复选框,请选择单选按钮
- 如何选择复选框而不选择整行(参见正文)
- 选中“ExtjS”复选框时,才选择行
- 使用vb-在网格视图中选择复选框后获取行值,以避免在每次选择时刷新页面
- jQuery选择复选框时,文本存在,隐藏未选中的行从打印
- 在表格行中选择单选按钮时,行的颜色应该更改
- 在数据表中单击选择行,然后将所选数据导出为Excel
- 使用javascript从矩阵中选择行或列的复选框