上點擊單選按鈕

自動填充輸入字段數據。當用戶選擇單選按鈕在2個類別規劃細節和計劃持續時間輸入欄應與通過JavaScript相關數據填充。上點擊單選按鈕

請檢查HTML標記和JavaScript的下方，建議更正或將工作的另一種方法。

<h3 class="fltClear">Plan Details</h3> 
<div id="spryradio1"> 
<dt>Plan Type: <span class="required">*</span></dt> 
<dd> 
<label> 
    <input type="radio" name="RadioGroup1" value="Silver" id="RadioGroup1_0" onClick="changeplanprice();" class="RadioGroup1" /> 
    Silver</label> 
<br> 
<label> 
    <input type="radio" name="RadioGroup1" value="Gold" id="RadioGroup1_1" onClick="changeplanprice();" class="RadioGroup1" /> 
    Gold</label> 
<br> 
<label> 
    <input type="radio" name="RadioGroup1" value="Platinum" id="RadioGroup1_2" onClick="changeplanprice();" class="RadioGroup1" /> 
    Platinum</label> 
<br> 
<label> 
    <input type="radio" name="RadioGroup1" value="All-in-one" id="RadioGroup1_3" onClick="changeplanprice();" class="RadioGroup1" /> 
    All-in-one</label> 
<br> 
<span class="radioRequiredMsg">Please make a selection.<span class="hint-pointer">&nbsp;</span></span> 
</dd> 
</div> 

<!--Plan Duration--> 

<div id="spryradio2"> 
<dt>Plan Duration: <span class="required">*</span></dt> 
<dd> 
<label> 
    <input type="radio" name="RadioGroup2" value="Yearly" id="RadioGroup2_0" onClick="changeplanprice();" class="RadioGroup2" /> 
    Yearly</label> 
<br> 
<label> 
    <input type="radio" name="RadioGroup2" value="Quaterly" id="RadioGroup2_1" onClick="changeplanprice();" class="RadioGroup2" /> 
    Quaterly</label> 
<br> 
<label> 
    <input type="radio" name="RadioGroup2" value="Monthly" id="RadioGroup2_2" onClick="changeplanprice();" class="RadioGroup2" /> 
    Monthly</label> 
<br> 
<label> 
    <input type="radio" name="RadioGroup2" value="Other" id="RadioGroup2_3" onClick="changeplanprice();" class="RadioGroup2" /> 
    Other</label> 
<br> 
<span class="radioRequiredMsg">Please make a selection.<span class="hint-pointer">&nbsp;</span></span> 
</dd> 
</div> 

<!--Plan Price--> 
<div> 

    <script> 
    function changeplanprice() { 
     var plantype=document.getElementByClassName('RadioGroup1').value; 
     var planduration=document.getElementByClassName('RadioGroup2').value; 
     if(plantype=="Silver") { 
      if(planduration=="Monthly")  { 
       document.getElementById('Price').value='£ 39.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Quaterly") { 
       document.getElementById('Price').value='£ 79.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Yearly") { 
       document.getElementById('Price').value='£ 124.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Other")  { 
       document.getElementById('Price').value=''; 
       document.getElementById('Price').readOnly=false; 
       } 
       } 
      else if(plantype=="Gold") { 
       if(planduration=="Monthly") { 
       document.getElementById('Price').value='£ 49.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Quaterly") { 
       document.getElementById('Price').value='£ 99.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Yearly") { 
       document.getElementById('Price').value='£ 179.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Other")  { 
       document.getElementById('Price').value=''; 
       document.getElementById('Price').readOnly=false; 
       } 
       } 
      else if(plantype=="Platinum") { 
       if(planduration=="Monthly") { 
       document.getElementById('Price').value='£ 59.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Quaterly") { 
       document.getElementById('Price').value='£ 199.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Yearly") { 
       document.getElementById('Price').value='£ 279.98'; 
       document.getElementById('Price').readOnly=true; 
       } 
      else if(planduration=="Other")  { 
       document.getElementById('Price').value=''; 
       document.getElementById('Price').readOnly=false; 
       } 
       } } 
     </script>

<div> 
<dt><label for="Price">Plan Price:</label></dt> 
<dd class="bg"><input type="text" name="Price" id="Price" size="80" class="input" readonly="readonly" /> 
</dd> 
</div>

來源

2012-05-08 Aliasger Matiwala

這是更好地給上http://jsfiddle.net代碼樣本，以便我們能與工作的事情 –

@ Travesty3打轉轉：一JSFiddle很好，但代碼的重要部分也應該在問題中！ – ThiefMaster

@ThiefMaster：好的，我不會決定哪些部分是重要的，所以我只是將它回滾到原來的位置，並添加了JSFiddle鏈接。 – Travesty3

的第一個建議，我會給就是有單

document.getElementById('Price').readOnly=true;

這會讓你的代碼更易讀。第二個建議是，你可以有2個數組，一個用於植物種類，另一個用於播種，而無線電按鈕代替文本，數組索引作爲值。

這不僅會讓你的代碼更易讀，而且也更易於管理。假設，如果你要添加一個planduration，你將不得不添加相同條件全部plantypes，那裏是錯過了一個箱體的可能性。

來源

2012-05-08 12:57:54

你的函數可以使用清理一點點，但有一個問題，我看到的。您正在使用document.getElementByClassName(' ... ').value;。這是不正確的。該函數實際上是document.getElementsByClassName（注意元素是複數）。該函數返回具有該類名稱的所有元素的數組。所以你不能直接致電.value。您需要循環遍歷元素數組以查找檢查哪個元素並獲取該元素的值。

鑑於一個組的所有單選按鈕都具有相同的名稱，並且還有另一個功能document.getElementsByName，因此沒有理由使用getElementsByClassName。

我會改變你的函數。這是經過測試和工作的，並且更容易擴展，以防您提出新的定價選項。所有你必須做的是添加到prices對象：

function changeplanprice() { 
    var plantype; 
    var plantypes = document.getElementsByName('RadioGroup1'); 
    for (var i=0; i < plantypes.length; i++) { 
     if (plantypes[i].checked) 
      plantype = plantypes[i].value; 
    } 

    var planduration; 
    var plandurations = document.getElementsByName('RadioGroup2'); 
    for (i = 0; i < plandurations.length; i++) { 
     if (plandurations[i].checked) 
      planduration = plandurations[i].value; 
    } 

    if (plantype === undefined || planduration === undefined) 
     return; 

    document.getElementById('Price').readOnly = (planduration != "Other"); 

    var prices = { 
     "Silver":{ 
      "Monthly":"£ 39.98", 
      "Quarterly":"£ 79.98", 
      "Yearly":"£ 124.98", 
      "Other":"" 
     }, 
     "Gold":{ 
      "Monthly":"£ 49.98", 
      "Quarterly":"£ 99.98", 
      "Yearly":"£ 179.98", 
      "Other":"" 
     }, 
     "Platinum":{ 
      "Monthly":"£ 59.98", 
      "Quarterly":"£ 199.98", 
      "Yearly":"£ 279.98", 
      "Other":"" 
     }, 
     "All-in-one":{ 
      "Monthly":"...", /* prices weren't provided for All-in-one in the example */ 
      "Quarterly":"...", 
      "Yearly":"...", 
      "Other":"" 
     } 
    }; 

    document.getElementById('Price').value = prices[plantype][planduration]; 
}

來源

2012-05-09 12:27:46 Travesty3

非常感謝。我非常感謝你的幫助。乾杯。 –

上點擊單選按鈕

回答

相關問題