0

作成中の Web ページで選択したオプションに基づいて、フォームの自動入力と合計の計算を行いたいと考えています。私は JavaScript を初めて使用し、このサイトで次のコード例を見つけましたが、希望どおりに動作するように変更できませんでした。どんな助けでも大歓迎です。チェックボックスは計算しますが、選択リストは計算しません。

<html>
    <head>
        <script type = "text/javascript">
            var allprices = [];
            var index = 0;

            function chkrads(frmName,rbGroupName) {
                var chosen = "";
                var radios = document[frmName].elements[rbGroupName];
                for (var i=0; i <radios.length; i++) {
                    if (radios[i].checked) {
                        chosen = radios[i].value;
                    }
                }

                if (chosen == 0) {printprice = 0}
                if (chosen == 1) {printprice = 99}
                if (chosen == 2) {printprice = 150}
                if (chosen == 3) {printprice = 250}
                if (chosen == 21) {printprice = 200}
                if (chosen == 22) {printprice = 300}    
                if (chosen == 30) {printprice = 50}    
                if (chosen == 41) {printprice = 50}
                if (chosen == 42) {printprice = 70}
                if (chosen == 43) {printprice = 90}
                if (rbGroupName == "size") {index = 0}
                if (rbGroupName == "colour") {index = 1}
                if (rbGroupName == "frame") {index = 2}
                if (rbGroupName == "glass") {index = 3}
                if (rbGroupName == "hook") {index = 4}
                if (rbGroupName == "delivery") {index = 5}

                allprices[index] = printprice;

                var totalprice = 0;
                for (var i =0; i <allprices.length; i++) {
                    if (!isNaN(allprices[i])) {
                        totalprice = totalprice + allprices[i];
                    }
                }

                document.getElementById("result").style.display = "block";
                document.getElementById("result").innerHTML = totalprice;
            }
        </script>
    </head>
    <body>
        <form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;">
            <select name = "size" onchange = "chkrads('myform', 'size')">
                <option></option>
                <option value = "0">0</option>
                <option value = "1">1</option>
            </select>
            </option><br>
            <br /><br /><br /><br />

            <input type = "radio" name = "colour" value = "0" onclick = "chkrads('myform', 'colour')"><b>No</b>
            <input type = "radio" name = "colour" value = "21" onclick = "chkrads('myform', 'colour')"><b>black</b>
            <input type = "radio" name = "colour" value = "22" onclick = "chkrads('myform','colour')"><b>Multi Colour</b>

            <br /><br /><br /><br />

            <input type = "radio" name = "frame" value = "0" onclick = "chkrads('myform', 'logo')">    <b>No</b>
            <input type = "radio" name = "frame" value = "30" onclick = "chkrads('myform', 'logo')"><b>Yes</b>
            <br /><br /><br /><br />

            <input type = "radio" name = "glass" value = "0" onclick = "chkrads('myform', 'glass')"><b>No</b>
            <input type = "radio" name = "glass" value = "51" onclick = "chkrads('myform',     'glass')"><b>Yes</b>

            <br /><br /><br /><br />

            <input type = "radio" name = "hook" value = "0" onclick = "chkrads('myform', 'hook')">    <b>0</b>
            <input type = "radio" name = "hook" value = "41" onclick = "chkrads('myform', 'hook')">    <b>1</b>
            <input type = "radio" name = "hook" value = "42" onclick = "chkrads('myform', 'hook')">    <b>2</b>
            <input type = "radio" name = "hook" value = "43" onclick = "chkrads('myform', 'hook')">    <b>3</b>

            <br /><br /><br /><br />

            <input type = "radio" name = "delivery" value = "0" onclick = "chkrads('myform',     'delivery')"><b>No</b>
            <input type = "radio" name = "delivery" value = "61" onclick = "chkrads('myform',     'delivery')"><b>Yes</b>

        </form>


        <div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span>     </div>

    </body>
</html>
4

1 に答える 1

0

したがって、問題は次のステートメントです。

if (radios[i].checked) {
        chosen = radios[i].value;

要素がチェックボックスの場合にのみ「選択済み」を設定します。

代わりにこれを試してください：

if (radios[i].checked || radios[i].selected) {
        chosen = radios[i].value;

私はjsfiddleをセットアップしました：

http://jsfiddle.net/ARqQr/3/

余談ですが、これはノックアウトjsを使用して非常に簡単に解決できるもののように見え、コードを少し整理する可能性があります...

于 2013-04-30T14:29:17.467 に答える