JavaScript - 将复选框计算添加到总价中

时间:2012-08-01 16:35:24

标签: javascript checkbox quotes

好吧所以我是一个初学者(一天前开始这个旅程)慢慢地教我自己的javascript,我为一个简单的价格引用写了一个代码......但是现在我试图建立它。我知道代码的格式非常糟糕(我不知道空间应该去哪里和那些括号:S)但我想出的是什么......间距和东西对程序有影响吗?或者出于美观原因和易于调试等...

所以我的价格报价......它有一些总价格,时间,镜头和DVD的等式...它们都是输入字段,现在我想在等式中添加复选框..如果它们是检查一个值将被添加到总...我在计算器中有他们但没有附加脚本...只有三个复选框有一个设定值... 2复选框将有一个值乘以在添加到总数之前的dvds数...最后一个复选框将是另一个类似于我已经输入的文本输入..

我已经尝试了多个东西,比如另一个功能,但它可能做错了反正大声笑,我尝试了另一个计算功能,添加功能,updatecost功能,一些chkbox功能(我忘了名字)...但我不知道怎么弄在该复选框的函数中计算的值,进入计算函数的等式。我尝试了parsefloat的事情,如果我检查了值,它只能半工作....

我尝试的另一件事是在输入复选框的值之前输入隐藏值0,两者都具有相同的名称......一些研究告诉我,如果未选中复选框,则默认为隐藏值我设置了相同的名称(这是0)...它没有工作...或者我可能没有在方程中输入它...请指导我正确的方向:)我即将拉我的头发!!!“

http://jsfiddle.net/yetanothercoder/uFD3y/

<html>

<head>
    <style type="text/css">
        .tableheader {
            font-weight: bold;
            font-size: 20px;
            font-family: calibri;
            text-align: center;
        }
        .regreelfont {
            font-size: 15px;
            font-family: calibri;
            text-align: right;
            background-color: #96C6FF;
        }
        .supreelfont {
            font-size: 15px;
            font-family: calibri;
            text-align: right;
            background-color: #7CB8FF;
        }
        .sixreelfont {
            font-size: 15px;
            font-family: calibri;
            text-align: right;
            background-color: #55A1FE;
        }
        .bottomfonts {
            font-family: calibri;
            font-size: 16px;
            font-weight: 900;
        }
        .cellcolor {
            text-align: center;
            background-color: #D2E7FF;
        }
        .cellcolor2 {
            text-align: left;
            background-color: #D2E7FF;
        }
        .rightside {
            background-color: #D2E7FF;
            text-align: right;
        }
        .border {
            border-width: 10px;
            border-radius: 20px;
            border-style: solid;
            border-color: #CBCBCB;
        }
        .leftside {
            text-align: left;
        }
        .bottwo {
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .addons {
            font-family: Lucida Console;
            font-size:11px;
            font-weight;
            bold;
        }
        .topleft {
            border-top-left-radius: 10px;
        }
        .topright {
            border-top-right-radius: 10px;
        }
        .orange {
            color: #fef4e9;
            border: solid 1px ##197BFB;
            border-radius: 10px;
            background: #f78d1d;
            background: -webkit-gradient(linear, left top, left bottom, from(#197BFB), to(#4A5C75));
            background: -moz-linear-gradient(top, #197BFB, #207DF6);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#197BFB', endColorstr='#4A5C75');
        }
        .orange:hover {
            background: #C3D9FF;
        }
        .orange:active {
            color: #000000;
    </style>
    <script language="javascript" type="text/javascript">
        function calculate() {

            var type;

            price = parseFloat(0.20);

            regthree = parseFloat(document.form.regthree.value);
            if (isNaN(regthree)) {
                regthree = 0;
            }
            regfour = parseFloat(document.form.regfour.value);
            if (isNaN(regfour)) {
                regfour = 0;
            }
            regfive = parseFloat(document.form.regfive.value);
            if (isNaN(regfive)) {
                regfive = 0;
            }
            regsix = parseFloat(document.form.regsix.value);
            if (isNaN(regsix)) {
                regsix = 0;
            }
            regseven = parseFloat(document.form.regseven.value);
            if (isNaN(regseven)) {
                regseven = 0;
            }
            supthree = parseFloat(document.form.supthree.value);
            if (isNaN(supthree)) {
                supthree = 0;
            }
            supfour = parseFloat(document.form.supfour.value);
            if (isNaN(supfour)) {
                supfour = 0;
            }
            supfive = parseFloat(document.form.supfive.value);
            if (isNaN(supfive)) {
                supfive = 0;
            }
            supsix = parseFloat(document.form.supsix.value);
            if (isNaN(supsix)) {
                supsix = 0;
            }
            supseven = parseFloat(document.form.supseven.value);
            if (isNaN(supseven)) {
                supseven = 0;
            }
            sixthree = parseFloat(document.form.sixthree.value);
            if (isNaN(sixthree)) {
                sixthree = 0;
            }
            sixfour = parseFloat(document.form.sixfour.value);
            if (isNaN(sixfour)) {
                sixfour = 0;
            }
            sixfive = parseFloat(document.form.sixfive.value);
            if (isNaN(sixfive)) {
                sixfive = 0;
            }
            sixsix = parseFloat(document.form.sixsix.value);
            if (isNaN(sixsix)) {
                sixsix = 0;
            }
            sixseven = parseFloat(document.form.sixseven.value);
            if (isNaN(sixseven)) {
                sixseven = 0;
            }

            regthreetot = parseFloat(regthree * 50);
            regfourtot = parseFloat(regfour * 100);
            regfivetot = parseFloat(regfive * 200);
            regsixtot = parseFloat(regsix * 300);
            regseventot = parseFloat(regseven * 400);
            supthreetot = parseFloat(supthree * 50);
            supfourtot = parseFloat(supfour * 100);
            supfivetot = parseFloat(supfive * 200);
            supsixtot = parseFloat(supsix * 300);
            supseventot = parseFloat(supseven * 400);
            sixthreetot = parseFloat(sixthree * 50);
            sixfourtot = parseFloat(sixfour * 100);
            sixfivetot = parseFloat(sixfive * 200);
            sixsixtot = parseFloat(sixsix * 300);
            sixseventot = parseFloat(sixseven * 400);

            rthreet = parseFloat(regthree * 3.5);
            if (isNaN(regthree)) {
                regthree = 0;
            }
            rfourt = parseFloat(regfour * 7);;
            if (isNaN(regfour)) {
                regfour = 0;
            }
            rfivet = parseFloat(regfive * 14);
            if (isNaN(regfive)) {
                regfive = 0;
            }
            rsixt = parseFloat(regsix * 22);
            if (isNaN(regsix)) {
                regsix = 0;
            }
            rsevent = parseFloat(regseven * 29);
            if (isNaN(regseven)) {
                regseven = 0;
            }
            sthreet = parseFloat(supthree * 3);
            if (isNaN(supthree)) {
                supthree = 0;
            }
            sfourt = parseFloat(supfour * 6);
            if (isNaN(supfour)) {
                supfour = 0;
            }
            sfivet = parseFloat(supfive * 13);
            if (isNaN(supfive)) {
                supfive = 0;
            }
            ssixt = parseFloat(supsix * 20);
            if (isNaN(supsix)) {
                supsix = 0;
            }
            ssevent = parseFloat(supseven * 26);
            if (isNaN(supseven)) {
                supseven = 0;
            }
            sithreet = parseFloat(sixthree * 1.5);
            if (isNaN(sixthree)) {
                sixthree = 0;
            }
            sifourt = parseFloat(sixfour * 3);
            if (isNaN(sixfour)) {
                sixfour = 0;
            }
            sifivet = parseFloat(sixfive * 7);
            if (isNaN(sixfive)) {
                sixfive = 0;
            }
            sisixt = parseFloat(sixsix * 11);
            if (isNaN(sixsix)) {
                sixsix = 0;
            }
            sisevent = parseFloat(sixseven * 14);
            if (isNaN(sixseven)) {
                sixseven = 0;
            }

            totalprice = parseFloat(regthreetot + regfourtot + regfivetot + regsixtot + regseventot + supthreetot + supfourtot + supfivetot + supsixtot + supseventot + sixthreetot + sixfourtot + sixfivetot + sixsixtot + sixseventot) * price;
            tottime = parseFloat(rthreet + rfourt + rfivet + rsixt + rsevent + sthreet + sfourt + sfivet + ssixt + ssevent + sithreet + sifourt + sifivet + sisixt + sisevent)
            totalfoot = parseFloat(regthreetot + regfourtot + regfivetot + regsixtot + regseventot + supthreetot + supfourtot + supfivetot + supsixtot + supseventot + sixthreetot + sixfourtot + sixfivetot + sixsixtot + sixseventot)

            dvdcal = parseFloat(tottime / 60)
            totdvd = Math.ceil(dvdcal)


            document.form.quote.value = totalprice;
            document.form.totalfootage.value = totalfoot;
            document.form.ttime.value = tottime;
            document.form.totdvd.value = totdvd;
            document.form.totad.value = music
        }
    </script>
</head>

<body>
    <form name="form">
        <table class="border" cellspacing="0" cellpadding="3">
            <tr>
                <td class="tableheader cellcolor topleft">Reel Size</td>
                <td class="tableheader cellcolor topright"># of Reels</td>
            </tr>
            <tr>
                <td class="regreelfont">3" Regular8 (50 ft)</font>
                </td>
                <td class="cellcolor">
                    <input type="text" name="regthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">4" Regular8 (100 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">5" Regular8 (200 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">6" Regular8 (300 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="regreelfont">7" Regular8 (400 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="regseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
                <tr></tr>
                <td class="supreelfont">3" Super8 (50 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="supthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="supreelfont">4" Super8 (100 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="supfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="supreelfont">5" Super8 (200 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="supfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="supreelfont">6" Super8 (300 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="supsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="supreelfont">7" Super8 (400 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="supseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="sixreelfont">3" 16mm (50 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="sixthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td td class="sixreelfont">4" 16mm (100 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="sixfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td td class="sixreelfont">5" 16mm (200 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="sixfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td td class="sixreelfont">6" 16mm (300 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="sixsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td td class="sixreelfont">7" 16mm (400 ft)</td>
                <td class="cellcolor">
                    <input type="text" name="sixseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
                </td>
            </tr>
            <tr>
                <td class="cellcolor addons leftside" colspan="2">BACKGROUND MUSIC - $14.99
                    <input type="checkbox" name="ckBox" id="ckBox">
                </td>
            </tr>
            <tr>
                <td class="cellcolor addons leftside" colspan="2">TITLES (PER DVD) - $9.99
                    <input type="checkbox" name="titles">
                </td>
            </tr>
            <tr>
                <td class="cellcolor addons leftside" colspan="2">TRANSITIONS (PER DVD) - $9.99
                    <input type="checkbox" name="transitions"
                    </td>
            </tr>
            <tr>
                <td class="cellcolor addons leftside" colspan="2">FILM REPAIR AND SPLICING - $14.99
                    <input type="checkbox" name="adees" value="14.99">
                </td>
            </tr>
            <tr>
                <td class="cellcolor addons leftside" colspan="2">SPECIAL FILM EDITING - $100.00
                    <input type="checkbox" name="adees" value="100">
                </td>
            </tr>
            <tr>
                <td class="cellcolor addons leftside" colspan="2">EXTRA COPIES - $9.99 PER COPY
                    <input type="text" name="copies" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:50px; font-size:15px">
                </td>
            </tr>
            <tr>
                <td class="cellcolor" colspan="2"></td>
            </tr>
            <tr>
                <td class="rightside bottomfonts" colspan="2">TOTAL PRICE ($)
                    <input type="text" name="quote" style="font-family:Verdana; background-color:#FFFFE5; height:25px; text-align:center; width:100px; font-size:16px">
                </td>
                <tr/>
                <tr>
                    <td class="rightside bottomfonts" colspan="2">FOOTAGE (ft)
                        <input type="text" name="totalfootage" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px"
                        </td>
                </tr>
                <tr>
                    <td class="rightside bottomfonts" colspan="2">TOTAL TIME (min)
                        <input type="text" name="ttime" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px">
                    </td>
                </tr>
                <tr>
                    <td class="rightside bottomfonts" colspan="2">TOTAL DVDs
                        <input type="text" name="totdvd" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px">
                    </td>
                </tr>
                <tr>
                    <td class="cellcolor bottwo" colspan="2">
                        <input type="button" class="orange" style="font-size: 18px; width:60px;height:35px"
                        value="Clear" onClick="this.form.reset()">&nbsp
                        <input type="button" name="Button" class="orange" style="font-size: 18px; width:120px;height:35px"
                        value="Calculate" onClick="calculate()">
                    </td>
                </tr>
        </table>
    </form>
</body>

0 个答案:

没有答案