为什么html复选框功能仅适用于IE，但不适用于Firefox或Chrome？

我正在调试一个JavaScript/JSP/Struts应用程序，它有一个复选框，用于高级搜索，当它被选中时，其他2个项目应该显示在页面上供用户输入更多信息，但这只适用于IE浏览器，但不是Firefox或Chrome浏览器，当在其他两个浏览器上检查时没有响应，为什么？以及如何使它在所有浏览器中都能正常工作？为什么html复选框功能仅适用于IE，但不适用于Firefox或Chrome？

enter image description here

<script type="text/javascript"> 
    function checkAdvSearch(checked) {  
     if(checked) { 
      document.getElementById("searchTerm2").style.display = ''; 
      document.getElementById("searchField2").style.display = ''; 
     }else { 
      document.getElementById("searchTerm2").style.display = 'none'; 
      document.getElementById("searchField2").style.display = 'none'; 
      document.getElementById("searchLOB").style.display = 'none'; 

      document.getElementById("searchTerm2").value = ''; 
      document.getElementById("searchField2").value = 'clientName'; 
      document.getElementById("searchStatus").value = ''; 
      document.getElementById("searchLOB").value = ''; 
     } 
    } 
</script> 

... 
<!-- for advanced search --> 
    <td Valign=top width=300> 
    <input type="checkbox" name="advSearch" onclick="checkAdvSearch(this.checked);" tabindex="5"/>Advanced Search 
    <html:text property="searchTerm2" value="" style="display:none" tabindex="6"/> 
    </td> 
    <td Valign=top width=178> 
    <html:select property="searchField2" onchange="showOptions2(this.form)" value= "" style="display:none" tabindex="7"> 
     <html:option value="clientName">Insured Name</html:option> 
     <html:option value="policy">Policy Number</html:option> 
     ... 
    </html:select> 
    </td> 
...

来源

2014-10-27 Frank

一些研究，我找到了答案后，增加了 “styleId” 下面的解决了这个问题：

<html:text property="searchTerm2" styleId="searchTerm2" value="" style="display:none" tabindex="6"/> 

<html:select property="searchField2" styleId="searchField2" onchange="showOptions2(this.form)" value= "" style="display:none" tabindex="7">

styleId = “XYZ” 加工后，会变成ID为 “XYZ” 的将通过document.getElementById（）进行标识，否则将导致错误，因为其中没有Id。

来源

2014-10-29 22:58:35 Frank

我相信在座这种简化的代码示例工程所需的目的：

<html> 
<body> 

<script type="text/javascript"> 
    function checkAdvSearch(checked) { 
     console.log("Test"); 
     if(checked == 1) { 
      document.getElementById("searchTerm2").style.display = ''; 
      document.getElementById("searchField2").style.display = ''; 
     }else { 
      document.getElementById("searchTerm2").style.display = 'none'; 
      document.getElementById("searchField2").style.display = 'none'; 


      document.getElementById("searchTerm2").value = ''; 
      document.getElementById("searchField2").value = 'Client Name'; 
     } 
    } 
</script> 

    <input type="checkbox" name="advSearch" onclick="checkAdvSearch(this.checked);" />Advanced Search 
    <input type="text" id="searchTerm2" value="" /> 
    <select id="searchField2" value= "clientName" > 
     <option>Client Name</option> 
     <option>Policy Number</option> 
    </select> 
</body> 
</html>

正如我从来没有见过宣告HTML元素的格式，我会大胆地猜测你的问题在那里，最有可能的原因是在某些浏览器上attritube的值没有正确转换为id。你可能想要坚持用于web开发的标准html标签。

要验证这是您在Firefox中的问题，请尝试使用ctrl-shift-k打开控制台，并且当您单击高级复选框时应该会看到以下消息。

TypeError: document.getElementById(...) is null

来源

2014-10-27 20:59:36

它适用于Firefox和Chrome，但不适用于IE。感谢您的示例代码，至少您指出了我的正确方向。 – Frank 2014-10-28 00:00:00

为什么html复选框功能仅适用于IE，但不适用于Firefox或Chrome？

回答

相关问题