如何使用下拉菜单和单选按钮自动计算汇总表
How to auto-total form calculation with dropdown and radio button?
我正在制作一份预订表，在确认之前显示营地的总费用。我的问题是，我可以写一个脚本来显示表单的外观，但它不起作用。
这是我的脚本：
HTML
<td>Student</td>
<td>
<select name="stu" id="Student">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>Teacher</td>
<td>
<select name="tchr" id="Teacher">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>House Type</td>
<td>
<input type="radio" name="accom" value="100" id="a1">
<label for="a1">Hotel</label>
<input type="radio" name="accom" value="0" id="a2">
<label for="a2">House</label>
</td>
<td>Accommodation</td>
<td>
<span id="zStay">0</span>
</td>
<td>Total</td>
<td>
<span id="total1">0</span>
</td>
Javascript
$(window).load(function () {
var nTchr = 0;
var nStu = 0;
var nStay = 0;
$("#Teacher").change(function () {
nTchr = parseInt($(this).val(), 10);
calcTotals();
});
$("#Student").change(function () {
nStu = parseInt($(this).val(), 10);
calcTotals();
});
$('input[name=accom]').change(function (evt) {
nStay = parseInt($(this).val(), 10);
calcTotals();
});
function calcTotals() {
var zStay = nStay * (nStu + nTchr);
$('#zStay').number(zStay);
$("#total01").number(zStay + 60 * nTchr + 150 * nStu);
$("#total1").val(zStay + 60 * nTchr + 150 * nStu);
}
});
其中$.number()是一个插件，供参考：
$.fn.number = function (number, decimals, dec_point, thousands_sep) {
number = (number + '').replace(/[^0-9+'-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/'B(?=(?:'d{3})+(?!'d))/g, sep);
}
if ((s[1] || '').length > prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
// Add this number to the element as text.
this.text(s.join(dec));
};此处演示：http://jsfiddle.net/8u26ozh3/
直白：
- 为什么它不起作用
- 如何修复
更改
$(window).load(function(){...})
带有
$(function(){...})
total01 id的元素在哪里？
演示
您应该替换：
$(window).load(function () {
witk:
$(document).ready(function () {
请更正您的代码，我得到了输出
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body id="contextmenu">
<form>
<table border width="100%">
<tr>
<td>Student</td>
<td>
<select name="stu" id="Student">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>Teacher</td>
<td>
<select name="tchr" id="Teacher">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td>House Type</td>
<td>
<input type="radio" name="accom" value="100" id="a1">
<label for="a1">Hotel</label>
<input type="radio" name="accom" value="0" id="a2">
<label for="a2">House</label>
</td>
</tr>
<tr>
<td>Accommodation</td>
<td>
<span id="zStay">0</span>
</td>
</tr>
<tr>
<td>Total</td>
<td>
<span id="total1">0</span>
</td>
</tr>
</table>
</form>
<script lang=JavaScript>
$.fn.number = function (number, decimals, dec_point, thousands_sep) {
number = (number + '').replace(/[^0-9+'-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/'B(?=(?:'d{3})+(?!'d))/g, sep);
}
if ((s[1] || '').length > prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
// Add this number to the element as text.
this.text(s.join(dec));
};
$(window).load(function () {
var nTchr = 0;
var nStu = 0;
var nStay = 0;
$("#Teacher").on('change', function () {
nTchr = parseInt($(this).val(), 10);
calcTotals();
});
$("#Student").on('change', function () {
nStu = parseInt($(this).val(), 10);
calcTotals();
});
$('input[name=accom]').on('change', function (evt) {
nStay = parseInt($(this).val(), 10);
calcTotals();
});
function calcTotals() {
var zStay =parseInt(nStay * (nStu + nTchr));
$('#zStay').text(zStay);
$("#total01").text(zStay + 60 * nTchr + 150 * nStu);
$("#total1").text(zStay + 60 * nTchr + 150 * nStu);
}
}); //]]>
</script>
</body>
</html>
相关文章：
- 根据元素和容器大小计算边距
- 从Rally获取一个特定的标记，以便计算另一个字段中的值
- 使用D3.js计算带有字母间距的文本长度
- 使用CSS或JavaScript计算分页符的数量
- 可以't计算自定义谷歌地图的js
- 如何计算每个元素's的高度，并将这些值用作函数中的变量
- JavaScript计算帮助(乘以时间）
- 如何计算对象文字中的键
- JavaScript循环无法正确计算/显示结果
- 与域在同一台计算机上运行的NODEJS服务器的CORS错误
- 四舍五入JavaScript计算
- 计算HTML中的页数
- 使用jQuery计算数组中的对象以更改进度条
- 如何在jquery中使用实时计算求和值
- 计算多个项目的价格
- 计算CSS3缩放框在另一个框中的最高位置
- 如何计算二十面体的法线
- if(foo！==null）的计算结果为true，即使foo为null
- 如何使用下拉菜单和单选按钮自动计算汇总表
- 计算结果未显示在汇总表javascript中
