我有一个包含三个部分的付款表格。基本上,第一个是带有乘数的“单选”列表,第二个是带有设置值的“复选框”列表,第三个是带有乘数的下拉列表 ==> (jsfiddle) .为清楚起见,我插入了一个文本框来显示总计算值。
当用户填写此表单时,如何计算并显示总数?
我尝试使用 this堆栈溢出响应,但它根本不起作用。
$('input').change(function(){
var tot = 1;
$.each($('input'),function(){
var curr_val = $(this).val();
if(curr_val != ""){
tot = tot * curr_val;
$('#total').val(tot);
}
});
});
最佳答案
您可以将选择器更改为排除 #total
,因为您不想听它的变化 - $(':input')。不('#total')。改变
。
您可以使用 #map()
jquery 函数获取已选中框的数组。
下一步是将它们全部相乘 - 使用#reduce()
函数添加数组。
请看下面的演示:
$(':input').not('#total').change(function() {
var tot = 1;
var s1 = +$('input[name=section1]:checked').val();
var s2 = $('input[name=section2]:checked').map(function() {
return +$(this).val();
}).get();
var s3 = +$('select').val();
$('#total').val(s1 * (s2.reduce(function(p,c){
return p + c;
},0) || 1) * s3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
<div id="section1">Section 1
<br><input type="radio" name="section1" value="2"> x2
<br><input type="radio" name="section1" value="1.5"> x1.5
<br><input type="radio" name="section1" value="1.5"> x1.5
<br><input type="radio" name="section1" value="1.5"> x1.5
<br><input type="radio" name="section1" value="1"> x1
<br><input type="radio" name="section1" value="1"> x1
</div>
<br>
<div id="section2">Section 2
<br><label><input type="checkbox" name="section2" value="4"><span>1</span></label>
<label><input type="checkbox" name="section2" value="4"><span>2</span></label>
<label><input type="checkbox" name="section2" value="4"><span>3</span></label>
<label><input type="checkbox" name="section2" value="4"><span>4</span></label>
<label><input type="checkbox" name="section2" value="4"><span>5</span></label>
<label><input type="checkbox" name="section2" value="4"><span>6</span></label>
<br><label><input type="checkbox" name="section2" value="4"><span>7</span></label>
<label><input type="checkbox" name="section2" value="4"><span>8</span></label>
<label><input type="checkbox" name="section2" value="4"><span>9</span></label>
<label><input type="checkbox" name="section2" value="4"><span>10</span></label>
<label><input type="checkbox" name="section2" value="4"><span>11</span></label>
<label><input type="checkbox" name="section2" value="4"><span>12</span></label>
</div>
<br>
<div>Section 3<br>
<select>
<option value="7">1 week</option>
<option value="14">2 weeks</option>
<option value="21">3 weeks</option>
<option value="28">4 weeks</option>
</select>
</div>
<input type="text" value="0" id="total">
</form>
关于javascript - jquery-在填写复选框/单选/下拉表单后计算总值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45911413/