Question

当用户选择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>

Answer 1

我要给的第一个建议是单身

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

这将使您的代码更具可读性。第二个建议是你可以有2个阵列，一个用于植物类型，另一个用于播种，而单选按钮代替文本，数组索引为值。

这不仅可以使您的代码更具可读性，而且更易于管理。假设您必须添加一个planduration，则必须为所有植物类型添加相同的条件，否则可能会遗漏一个案例。

Answer 2

你的功能可以使用一点清理，但我看到有一个问题。您正在使用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];
}

使用单击单选按钮上的数据自动填充输入字段

2 个答案: