HTML代码在Mozilla中无法正常工作

时间:2013-02-05 05:18:21

标签: javascript html mozilla

<html>
<body>

<script>
function show_mcap()
{
    if(document.form1.marriage.checked)
    document.getElementById("m_cap1").innerHTML="Hall Capacity<br><input type=text      name=hall[]><br>Dining Hall capacity<br><input type=text name=d_hall[]><br>Rent<br><input      type=text name=rent[]>"
    else 
    document.getElementById("m_cap1").innerHTML=""
}

    function show_bcap()
    {
        if(document.getElementById("bday").checked)
         {
           document.getElementById("b_cap1").innerHTML="Hall Capacity<br><input  type=text name=hall[]><br>Dining Hall capacity<br><input type=text name=d_hall[]><br>Rent<br><input type=text name=rent[]>"
         }
          else 
          document.getElementById("b_cap1").innerHTML=""
      }
 </script>



 <form name="form1">
 <table>

 <tr>
 <td width="230"><label for="bday">
  <input type="checkbox" name="category[]" value="marraige" id="marriage"     onClick="show_mcap()">Marriage/Reception
 </td>

 <td width="227">
 <input type="checkbox" name="bday" value="bday" id="bday" onClick="show_bcap()">Bday
 </td>
 </tr>
    <tr>
      <td><div id="m_cap1"></div></td>
      <td><div id="b_cap1"></div></td>
    </tr>
</table>
</form>
</body>
</html>

这是我写的代码。此代码在chrome,Internet Explorer,opera中运行良好。但是在mozilla中无法正常工作!当我点击第一个复选框时,会自动选中第二个复选框!请帮帮我

1 个答案:

答案 0 :(得分:4)

我认为这与你的标签有关。您将“marraige”周围的标签指定为“bday”。将其更改为“marraige”,它应该按预期运行。

即改变:

<td width="230"><label for="bday">
    <input type="checkbox" name="category[]" value="marraige" id="marriage"     onClick="show_mcap()">Marriage/Reception
</td>

<td width="230">
    <label for="marriage">
        <input type="checkbox" id="marriage" onClick="show_mcap()">Marriage/Reception
    </label>
</td>

有关在Firefox中测试的工作示例,请参阅http://jsfiddle.net/JGMMj/。我想注意代码中还有其他问题,但这解决了你提到的问题。