0

当用户在 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>
4

2 回答 2

0

您的函数可能需要进行一些清理，但我看到了一个问题。您正在使用document.getElementByClassName(' ... ').value;. 这是不正确的。该函数实际上是document.getElementsByClassName（注意 Elements 是复数）。此函数返回具有该类名称的所有元素的数组。所以你不能.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-09T12:27:46.723 回答
0

我将给出的第一个建议是单身

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

这将使您的代码更具可读性。第二个建议是你可以有两个数组，一个用于plantype，另一个用于planduration，单选按钮而不是文本，将数组索引作为值。

这不仅会使您的代码更具可读性，而且更易于管理。假设如果您必须添加一个平面持续时间，则必须为所有平面类型添加相同的条件，其中可能会丢失一个案例。

于 2012-05-08T12:57:54.787 回答