Javascript 单选按钮中的事件处理_Javascript_Onclick_Radio Button

Javascript 单选按钮中的事件处理

javascript

Javascript 单选按钮中的事件处理,javascript,onclick,radio-button,Javascript,Onclick,Radio Button,我想在使用单选按钮进行特定选择时显示隐藏字段。目前我已经用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%&

我想在使用单选按钮进行特定选择时显示隐藏字段。目前我已经用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';
}

该帐户是否已注册任何支票套餐？
对
函数accherol（）
{
if（document.getElementById（'ackenroly'）。选中）
{
document.getElementById（'packages'）.style.visibility='visible'；
}
其他的
{
document.getElementById（'packages'）.style.visibility='hidden'；
}

最奇怪的是，我在同一个文件中的另一个单选按钮有一段类似的代码，它似乎工作顺利，而这并没有显示预期的结果。我似乎找不到我犯错误的地方

完整的jsp代码如下所示：


``
``

E-Form

``


``
``

``

``
`账户（现有客户）或预计月余额（新客户）`*:`
` `
``
`--选择一个并在下面的“收件人”文本框中输入值--`
`客户（现有客户）`
`预计每月余额（新客户）`
`  `   
``
``
``
`帐号*：`
`  `
``
``
预计每月结余*：`
`
`
``
`帐户是否已注册到支票套餐或计划中？*：`
是不是`
``
``
`软件包名称*：`
``
``
``
`注册在线商务*：`
是的，不是`
``
``
`业务联系人的名字*：`
``
``
``
`业务联系人的姓氏*：`
``
``
``
`电话*：`
`
` `
``
``
``
``
`分行*：`
``
``
``
``
``
`
``
``
``
``
``
``
``
``
``
``
``
`
``
``
``
``
` `
``
``
``
` `
``
``
``
`*表示必填字段`
`` 
``
``
``
``
``
``

我修复了您的标记，并关闭了该函数，这对我来说很有效：

<!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>


window.onload=函数（）
{
accEnrol=函数（）
{
if（document.getElementById（'ackenroly'）。选中）
{
document.getElementById（'packages'）.style.visibility='visible'；
}
其他的
{
document.getElementById（'packages'）.style.visibility='hidden'；
}
}
}
JS-Bin
该账户是否登记了任何支票套餐？
对
我来了

jsBin：

这里是对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>


在此处输入您的代码
该账户是否登记了任何支票套餐？
对
不
函数accherol（）{
if（document.getElementById（'ackenroly'）。选中）{
document.getElementById（'packages'）.style.visibility='visible'；
警报（“已检查”）；
}
否则{
document.getElementById（'packages'）.style.visibility='hidden'；
警惕（“未检查”）；
}
}//这是您丢失的部分。

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

以下是上述代码的快照
进入页面时的初始显示

单击“否”时显示

我不明白为什么它对你不起作用。如果你能在设置id='packages'的地方发布实际代码，我会很有帮助。我能想到的唯一原因是重复id的问题。如果你在同一范围内有两个同名id，javascript将无法识别从哪个id中提取。
艾丽发现了错误，事实上这很愚蠢。我将函数名从accEnrol（）更改为programName，因为标记名和函数名相似，我想这显然是造成问题的原因。我一直收到错误消息-对象不支持此属性或方法。现在我对所有内容都有唯一的名称，它可以正常工作！！非常感谢你们的帮助和时间！！
Cheers
该函数需要在单选按钮之前定义。该函数位于单独的文件中，不在jsp页面上。同一个jspI上的另一个单选按钮工作正常。通过测试您的代码，它似乎工作正常。除非您不使用
 <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>