自動填充選擇和複選框來計算價格

我期待有一個窗體自動填充並基於爲我正在構建的網頁選擇的選項計算總計。我是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>

來源

2013-04-30 Tommy Garcia

所以問題是，這樣的說法：

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/

在一個側面說明，這看起來像是那將是非常容易使用knockoutjs解決，可能會整理代碼有點...

來源

2013-04-30 14:29:17 Henners

好的感謝工作的反應。 – 2013-04-30 15:47:08

最後一個問題是，如果我更改上面的代碼併爲選擇列表中的一組不同的值添加selected2，javascript將不起作用。 – 2013-04-30 15:47:58

雖然我將值分配給新變量 – 2013-04-30 15:48:46

自動填充選擇和複選框來計算價格

回答

相關問題