javascript控制层展开的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
-->
</style>
<script language="javascript">
function hide(){
 var l1 = document.all["L1"];
 for ( var i = 0; i < l1.length; i++ ) {
  l1[i].style.display="none";
 } }function show(elm) {
 var l1 = document.all["L1"];
 var c1 = document.all["chk"];
 for ( var i = 0; i < c1.length; i++ ) {
    if ( elm == c1[i] ) {
      break;
    }
 }
 currentElm = l1[i];
 if ( elm.checked ) {
   currentElm.style.display = "";
 } else {
   currentElm.style.display = "none";
 }
}</script>
</head><body onload="hide()">
<form name="form" >
<table width="362" border="1" >
  <tr>
    <td width="98">&nbsp;</td>
    <td width="175"><input type="hidden" name="id" value="Y" /></td>
    <td width="67"><label>
      <input name="chk" type="checkbox" name="checkbox" value="checkbox"  onclick="show(this);"  />
    </label></td>
  </tr>
  <tr>
    <td  colspan="3"><div id="L1">haha</div>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="hidden" name="id" value="Y" />&nbsp;</td>
    <td><label>
      <input name="chk" type="checkbox" name="checkbox" value="checkbox" onclick="show(this);" />
    </label>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3"><div id="L1">haha</div>&nbsp;</td>
  </tr>
  <tr>
    <td height="26">&nbsp;</td>
    <td><input type="hidden" name="id" value="N" />&nbsp;</td>
    <td><label>
      <input name="chk" type="checkbox" name="checkbox" value="checkbox"  onclick="show(this);"  />
    </label>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3"><div id="L1">haha</div>&nbsp;</td>
    </tr>
  <input name="cm" type="button" value="提交"  onclick="return display(form)"/>
</table></form>
</body>
</html>