Javascript 如何使用下拉菜单和单选按钮自动计算总表单？_Javascript_Jquery

Javascript 如何使用下拉菜单和单选按钮自动计算总表单？

javascript jquery

Javascript 如何使用下拉菜单和单选按钮自动计算总表单？,javascript,jquery,Javascript,Jquery,我正在做一张预订表，上面显示了在确认前露营的总费用。我的问题是我可以编写一个脚本来显示表单的外观，但它不起作用这是我的剧本： HTML <td>Student</td> <td> <select name="stu" id="Student"> <option value="1">1</option> <option value="2">2</option>

我正在做一张预订表，上面显示了在确认前露营的总费用。我的问题是我可以编写一个脚本来显示表单的外观，但它不起作用

这是我的剧本：

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>

其中，

$.number（）

是一个插件，仅供参考：

$.fn.number=函数（数字、小数、小数点、千分）{
数字=（数字+''）。替换（/[^0-9+\-Ee.]/g''）；
变量n=！isFinite（+数字）？0:+数字，
prec=！isFinite（+小数）？0:Math.abs（小数），
sep=（typeof millen\u sep=='undefined'）？，'：millen\u sep，
dec=（dec_点的类型==‘未定义’？’：dec_点，
s=“”，
toFixedFix=函数（n，prec）{
var k=数学功率（10，prec）；
返回“”+数学四舍五入（n*k）/k；
};
//修正IE parseFloat（0.55）。toFixed（0）=0；
s=（prec？toFixedFix（n，prec）：“”+数学四舍五入（n））.split（‘.）；
如果（s[0]。长度>3）{
s[0]=s[0]。替换（/\B（？=（？：\d{3}）+（？！\d））/g，sep）；
}
如果（（s[1]| |“）。长度>预处理）{
s[1]=s[1]| |''；
s[1]+=新数组（prec-s[1].长度+1）.join（'0'）；
}
//将此数字作为文本添加到元素中。
此.text（s.join（dec））；
};您应该替换：
$(window).load(function () {

威克：
改变
 $(window).load(function(){...})

与
total01 id的元素在哪里
请更正您的代码，我得到了输出
<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>


大学生
1.
2.
3.
4.
5.
教师
1.
2.
3.
4.
5.
户型
酒店
房屋
住处
0
全部的
0
$.fn.number=函数（数字、小数、小数点、千位）{
数字=（数字+''）。替换（/[^0-9+\-Ee.]/g''）；
变量n=！isFinite（+数字）？0:+数字，
prec=！isFinite（+小数）？0:Math.abs（小数），
sep=（typeof millen\u sep=='undefined'）？，'：millen\u sep，
dec=（dec_点的类型==‘未定义’？’：dec_点，
s=“”，
toFixedFix=函数（n，prec）{
var k=数学功率（10，prec）；
返回“”+数学四舍五入（n*k）/k；
};
//修正IE parseFloat（0.55）。toFixed（0）=0；
s=（prec？toFixedFix（n，prec）：“”+数学四舍五入（n））.split（‘.）；
如果（s[0]。长度>3）{
s[0]=s[0]。替换（/\B（？=（？：\d{3}）+（？！\d））/g，sep）；
}
如果（（s[1]| |“）。长度>预处理）{
s[1]=s[1]| |''；
s[1]+=新数组（prec-s[1].长度+1）.join（'0'）；
}
//将此数字作为文本添加到元素中。
此.text（s.join（dec））；
};
$（窗口）。加载（函数（）{
var-nTchr=0；
var nStu=0；
var nStay=0；
$（“#教师”）。关于（'change'，函数（）{
nTchr=parseInt（$（this）.val（），10）；
calcTotals（）；
});
$（“#学生”）。关于（'change'，函数（）{
nStu=parseInt（$（this）.val（），10）；
calcTotals（）；
});
$（'input[name=accom]'）。关于（'change'，函数（evt）{
nStay=parseInt（$（this）.val（），10）；
calcTotals（）；
});
函数calcTotals（）{
var zStay=parseInt（nStay*（nStu+nTchr））；
$（#zStay'）。文本（zStay）；
$（“#total01”）.text（zStay+60*nTchr+150*nStu）；
$（“总计1”）.text（zStay+60*nTchr+150*nStu）；
}
}); //]]>
在onDomready中加载脚本时，可以检查此选项
 $(window).load(function(){...})

 $(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>