2

当我使用单选按钮进行特定选择时，我想显示一个隐藏字段。目前我已经用 onClick 编写了代码。但不知何故，它似​​乎对我不起作用。

   <td height = 20 valign = middle align = right width = 40%>Is the account enrolled for any checking package?</td>
   <td height = 20 valign = middle align = left width = 60%><input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();">Yes <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();"></input></td>

function accEnrol()
{
  if(document.getElementById('accEnrolY').checked)
{
  document.getElementById('packages').style.visibility='visible';
}
else
{
  document.getElementById('packages').style.visibility='hidden';
}

最奇怪的部分是我在同一个文件中为另一个单选按钮有一段类似的代码，它似乎可以顺利工作，而这并没有显示所需的结果。我似乎无法找到我在哪里犯了错误。

完整的jsp代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ``<html> ``<head> <title>E-Form </title> <script type="text/javascript">

</script> ``<SCRIPT language="JavaScript" src="/Eform/JS/common.js"></SCRIPT>

<link href='/Eform/CSS/common.css' rel="stylesheet" type="text/css">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> ``<META HTTP-EQUIV="Expires" CONTENT="-1"> ``</head> <body

> ``<!--form action="/Eform/SendMail" method="post" id='Eform' name='Eform'--> <form action="/Eform/SendMail" method="post" enctype="multipart/form-data" id='Eform' name='Eform'> <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" ``class="text1">
<tr> <td valign="middle"> <table width="100%" border="0" cellpadding="0" cellspacing="0" ``bgcolor="#FFFFFF" align="center" class="commonText1">

                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Account(Existing Customers) or Projected Monthly Balance(New Customers)``* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"> `
                        `<select tabindex="0" ``name="accOrBalType" id="accOrBalType" onchange="doClear();" class="text1">`
                            `<option selected` `value="">-- Select One & Enter a value in to text box below --</option>`
                            `<option ``value="1">Account(Existing Customers)</option>`
                            `<option ` `value="2">Projected Monthly Balance(New Customers)</option>`    
                        `</select>  `   
                    `</td>`
                `</tr>`
                `<tr id = "accountNumber" style = "visibility:hidden">`
                    `<td height="20" valign="middle" ``align="right" width="40%">Account Number* :</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="accountNumber" size="20" ``onblur="selectFirst();" /></td> `
                `</tr>`
                `<tr id = "monthlyBalance" style `= "visibility:hidden">`
                    <td height="20" valign="middle"` `align="right" width="40%">Projected Monthly Balance* :</td>`
                    <td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" maxlength="20" name="monthlyBalance"  size="20" ``onblur="selectFirst();" /></td> `
                `</tr>
                `<tr id = "accEnrol" style = "visibility:hidden">`
                    `<td height="20" valign="middle" ``align="right" width="40%">Is the account already enrolled in a checking package or program?* :&nbsp;</td>`
                    <`td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="accEnrol" id="accEnrolY" value="Yes" ``onclick="packageName();"> Yes &nbsp;&nbsp; <input type="radio" class="text1" name="enrol" id="accEnrolN" ``value="No" onclick="packageName();"> No</td> `
                `</tr>`
                `<tr id = "packages" style = "visibility:hidden">`
                    `<td height="20" valign="middle" ``align="right" width="40%">Package Name* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" maxlength="100" class="text1" name="packages" size="50"/></td>`
                `</tr>`
                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Enrolled in Business Online* :&nbsp;</td>`
                    <td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="enrol" value="Yes"> Yes &nbsp;&nbsp; `<input `type="radio" class="text1" name="enrol" value="No"> No</td> `
                `</tr>`
                                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Business Contact's First Name* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" maxlength="15" class="text1" name="fName" id="fName" ``size="20" /></td>`
                `</tr>`
                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Business Contact's Last Name* :&nbsp;</td>`
                    `<td height="20" valign="middle"` `align="left" width="60%"><input type="text" maxlength="15" class="text1" name="lName" id="lName"` `size="20"/></td>`
                `</tr>`
                                                                            `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Telephone* :&nbsp;</td>`
                    <`td height="20" valign="middle"` `align="left" width="60%">`
                    `<input type="text" value=" +1-" size="1" ``readonly/>&nbsp;`
                        `<input type="text" ``maxlength="10" name="refTelephoneNo" id="refTelephoneNo" class="text1" size="11" />`
                    `</td>`
                `</tr>`
                `<tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">Branch* :&nbsp;</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"><input type="text" class="text1" maxlength="80" name="branch" id="branch" ``size="20" /></td>`
                `</tr>`
                `<!--tr>`
                    `<td height="20" valign="middle" ``align="right" width="40%">To mail Ids(semicolon separated)*</td>`
                    `<td height="20" valign="middle" ``align="left" width="60%"> <input type="text" class="text1" name="toList" id="toList" size="20" /></td>` 
                `</tr-->`
                `<tr>`
                    `<td height="10" align="center" ``width="40%"></td>`
                    <td height="10" align="center" `width="60%"></td> `
                `</tr>`
                `<tr>`
                    `<td align="right" width="40%">`
                        `<table border="0" ``cellspacing="0" cellpadding="0" width="100%">`
                            `<tr>`
                                `<td ``width="92%" height="5" align="right">`
                                    `<a target="_self" href="#" onclick="validateData('mail');" class="tryitbtn">Send Mail</a>`

                                `</td>`
                                `<td ``width="8%" height="5" align="left">`
                                    `<a target="_self" href="#" onclick="fnReset(document.forms[0]);" class="tryitbtn">Clear</a>`
                                `</td>`
                            <`/tr>`
                        `</table>`
                    `</td>`
                    `<td height="10" align="left" width="60%">`
                    `<a target="_self" href="#"` `onclick="validateData('preview');" class="tryitbtn">Preview</a>`
                    `</td> `
                `</tr>`
                `<tr>`
                    `<td height="10" align="center" ``width="40%"></td>`
                    `<td height="10" align="center" ``width="60%"></td> `
                `</tr>`

                `<tr>`
                    `<td height="10" align="center" width="40%">`
                        `<b>*</b> <FONT` `size="1">Indicates Mandatory Fields.</FONT></td>`
                    `<td height="10" align="center"` `width="60%"></td>` 
                `</tr>`
            `</table>`
        `</td>`
    `</tr>`
`</table>`
`</form>`

</body> </html>

4

3 回答 3

0

这是对 OP 代码的轻微修改。

<!--ADD THIS IN THE CODE-->
<div id='packages'>
enter your codes here
</div>

<td height = 20 valign = middle align = right width = 40%>
    Is the account enrolled for any checking package?
</td>
<td height = 20 valign = middle align = left width = 60%>
    <input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();">Yes</input> 
    <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();">No </input>
</td>
<script type="text/javascript">
function accEnrol(){
    if(document.getElementById('accEnrolY').checked){
        document.getElementById('packages').style.visibility='visible';
        alert ("checked");
    }
    else{
        document.getElementById('packages').style.visibility='hidden';
        alert ("unchecked");
    }
}    //This is the part you were missing.
</script>

我添加了警报消息以检查您是否获得了所需的输出。

以下是上述代码的快照
这些是netbeans中的代码。 进入页面时的初始显示
这是您到达该页面时的初始显示

单击否时显示

当您单击 no 并隐藏 id='packages' 的容器内容时会出现警报 单击“是”时会出现带有“已检查”消息的警报，并再次显示 id='packages' 的容器的内容

我不明白为什么它不适合你。如果您可以在设置了这些 id='packages' 的位置发布实际代码，我会很有帮助。我能想到的唯一原因是重复 ID 的问题。如果您在同一范围内有两个具有相同名称的 id，则 javascript 将无法识别从哪一个中提取。

于 2013-08-14T18:15:37.700 回答
0

我修复了您的标记，并关闭了该功能，这对我有用：

<!DOCTYPE html>
<html>
<head>
  <script>

    window.onload = function()
    {
      accEnrol = function ()
      {
        if(document.getElementById('accEnrolY').checked)
        {
          document.getElementById('packages').style.visibility='visible';
        }
        else
        {
          document.getElementById('packages').style.visibility='hidden';
        }
      }
    }

  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
   <td height = 20 valign = middle align = right width = 40%>Is the account enrolled for any checking package?</td>
      <td height = 20 valign = middle align = left width = 60%><input type = "radio" class="text1" name ="accEnrol" id ="accEnrolY" value = "Yes" onClick="accEnrol();"/>Yes <input type ="radio" class ="text1" name ="accEnrol" id ="accEnrolN" value ="No" onClick="accEnrol();"/></td>
  </tr>
    <div id="packages">Here am I</div>
</table>
</body>
</html>

jsBin：http: //jsbin.com/ayarar/1/edit

于 2013-08-14T18:01:43.883 回答
0

我终于发现了错误所在，实际上这很愚蠢。我将函数名称从 accEnrol() 更改为 programName 因为标签名称和函数名称相似，我猜这显然造成了问题。我不断收到错误消息 - 对象不支持此属性或方法。现在我对所有东西都有唯一的名称，它工作正常！！非常感谢你们所有的帮助和时间！！干杯

于 2013-08-18T10:16:26.473 回答