javascript - ラジオボタンでのイベント処理

Question

ラジオボタンを使用して特定の選択を行うときに非表示のフィールドを表示したい。現在、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" 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>

score 0 · Accepted Answer

これは、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 のコードです。 です。ページに到達したときの初期表示
これは、そのページに到達したときの最初の表示です