JavaScript和獲取單選按鈕的價值

我試圖用javascript創建一個在線計算表單，除了單選按鈕，一切都可以。JavaScript和獲取單選按鈕的價值

場景：

x(select list) = 
    item1 - value="11.2" 
    item2 - value="7.6" 
    item3 - value="7" 

y=(input number) 

z=(input number) 

coverkind=(radio button) 
    if 1 selected >> coverkind = z*800 
    if 2 selected >> coverkind = ((y/16)+1)*8*z 

totalprice= (x*y*z)+(1000*z)+coverkind

我的工作至今：

<html> 
<head> 
    <script type="text/javascript"> 
    function getselectionPrice() { 
    var elt = document.getElementById("selectionone"); 
    var selectionPrice = elt.options[elt.selectedIndex].value; 
    var y = document.getElementById("y").value; 
    var z = document.getElementById("z").value; 
    var ser = (selectionPrice * y * z); 
    var dz = z*1000; 

    var coverkind = document.getElementById("cover").value; 
    if (coverkind == 'soft') { 
     var SizePrice = (z * 800); 
    } else { 
     var SizePrice = ((y/16) + 1) * 8 * z; 
    } 

    var finalPrice = ser + dz; 
    document.getElementById("totalPrice").value = finalPrice; 
} 
    </script> 
</head> 
<body> 
    <div> 

     <form action="" id="calcform" onsubmit="return false;"> 
      <div> 
       <div> 
        <fieldset> 
         <label>select</label> 
         <select id="selectionone" name='selectionone' onChange="getselectionPrice()"> 
          <option value="11.2">1</option> 
          <option value="7.6">2</option> 
          <option value="7">3</option> 
         </select> 
         <br/> 
         <p>y 
          <input type="text" id="y" onchange="getselectionPrice()" /> 
         </p> 
         <p>z 
          <input type="text" id="z" onchange="getselectionPrice()" /> 
         </p> 
         <label>cover</label> 
         <input type="radio" name="cover" value="hard" />hard 
         <br /> 
         <br> 
         <input type="radio" name="cover" value="soft" />soft 
         <br> 
         <br> 
         <br/>The new calculated price: 
         <INPUT type="text" id="totalPrice" Size=8> 
        </fieldset> 
       </div> 
       <input type='submit' id='submit' value='Submit' onclick="getselectionPrice()" /> 
      </div> 
     </form> 
    </div> 
    </body> 
    </html>

如果我刪除JS的coverkind，其餘工作正常。我搜索了一下從單選按鈕獲得價值，並沒有發現與這種情況非常相關的東西。螢火錯誤面板：

類型錯誤：的document.getElementById（...）爲空 VAR coverkind =的document.getElementById（「罩」）值。

來源

2015-09-06 L D

我不明白你的問題是什麼。考慮編輯你的問題，使它（很多）更清晰。 – jwpfox

感謝您的建議，其形式有一個選項字段，兩個輸入數字和一個單選按鈕，然後通過公式計算值，並顯示最終的數字。 –

@LD - 我已經發布了您的問題的解決方案。檢查它並讓我知道結果。 –

這是您的問題的解決方案。

首先給你的單選按鈕一個相同的ID。選中的屬性會告訴你元素是否被選中：

<input type="radio" id="cover" name="cover" value="hard" checked="checked" />hard 
<br /> 
<br> 
<input type="radio" id="cover" name="cover" value="soft" />soft

和JavaScript函數，你可以得到它。

var coverkind = null; 
    if (document.getElementById('cover').checked) 
    { 
    coverkind = document.getElementById('cover').value; 
    } 
    if (coverkind == 'soft') { 
     var SizePrice = (z * 800); 
    } else { 
     var SizePrice = ((y/16) + 1) * 8 * z; 
    }

來源

2015-09-07 06:51:26

謝謝;你的代碼清除了錯誤，但它仍然不考慮計算中單選按鈕的值。 –

coverkind變量將獲得「硬」或「軟」值。基於coverkind valaue條件將是真或假，如果或者其他代碼將被執行。 SizePrice會得到你的計算結果。注 - SizePrice是局部變量，不能在外部使用。現在只需檢查你的計算邏輯。除了計算一切工作正常。使用開發工具找出錯誤。我的邏輯沒有錯誤。我再次測試過它。 –

你的問題解決了嗎？ –

如果您需要輸出標籤或其他輸出標籤，您可以使用輸出標籤。（例如，一個<p>元素）。只要確保你在Javascipt中提供了任何你想訪問的'id'值。

您需要創建一個新文件並將其命名爲'script.js'。 Google如何將這個腳本包含在你的html文檔中。

一些你需要在你的腳本中使用的東西：

document.getElementById(str) Returns an object representing an html element with an id of 'str'

parseFloat(str)Takes a string 'str' and return the float value

.value This is a read/write property of an input text box object that contains the text value

.checked ..and a property of an input radio button object.

當你碰了壁指的是偉大的谷歌;）把所有的一起，你應該在正確的軌道上。

來源

2015-09-06 06:01:29 Deftwun

非常感謝，我按照你的說法做了，但仍然無效。你能檢查一下嗎？ –

按F12打開開發者控制檯。點擊控制檯。尋找錯誤'當你碰壁時請參考偉大的谷歌'也稱爲'不起作用'是一個軟件開發商最大的敵人:)發生了什麼，什麼不發生？ – Deftwun

如果你可以使用jQuery，你可以在一行中得到選中的單選按鈕的值。

var Val = $("input[name=cover]:checked").val();

來源

2016-04-07 17:48:19 menaka

JavaScript和獲取單選按鈕的價值

回答

相關問題