单选按钮中的事件处理
我想在使用单选按钮进行特定选择时显示隐藏字段。目前我已经使用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)``* : </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?* : </td>`
<`td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="accEnrol" id="accEnrolY" value="Yes" ``onclick="packageName();"> Yes <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* : </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* : </td>`
<td height="20" valign="middle" ``align="left" width="60%"> <input type="radio" class="text1" name="enrol" value="Yes"> Yes `<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* : </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* : </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* : </td>`
<`td height="20" valign="middle"` `align="left" width="60%">`
`<input type="text" value=" +1-" size="1" ``readonly/> `
`<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* : </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>
3 个答案:
答案 0 :(得分：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>
答案 1 :(得分：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>
我已添加警报消息以检查您是否获得了所需的输出。
以下是上述代码的快照
到达页面时的初始显示
点击否
时显示 
我不明白为什么它不适合你。如果你可以发布你设置了id ='packages'的实际代码，我会很有帮助。我能想到的唯一原因是重复的id问题。如果在同一范围内有两个具有相同名称的ID，则javascript将无法识别要从中提取哪个ID。
答案 2 :(得分：0)
我终于发现了什么是错误，实际上它非常愚蠢。 我将函数名称从accEnrol（）更改为programName，因为标签名称和函数名称相似，我猜这显然是创建了问题。我一直收到错误 - 对象不支持此属性或方法。既然我拥有一切独特的名字，那就行得很好!! 非常感谢你们所有的帮助和时间！ 干杯
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？