為什么HTML復選框功能僅在IE中有效，而在Firefox或Chrome中不起作用？

Question

我正在調試一個JavaScript / JSP / Struts應用程序，它具有一個復選框，可以進行高級搜索，如果選中該復選框，則應該在頁面上顯示其他2個項目供用戶輸入更多信息，但這僅在IE中有效，但不是Firefox或Chrome，在其他2種瀏覽器上進行檢查時完全沒有響應，為什么？ 以及如何使其在所有瀏覽器中都能正常工作？

在此處輸入圖片說明

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

Answer 1

我相信這里的簡化代碼示例可以按您的預期工作：

<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。 您可能要堅持使用標准html標簽進行Web開發。

要驗證這是Firefox中的問題，請嘗試使用ctrl-shift-k打開控制台，然后單擊高級復選框，應該會收到以下消息。

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

Answer 2

經過一番研究，我找到了答案，在下面的問題中添加了“ 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而導致錯誤。

為什么HTML復選框功能僅在IE中有效，而在Firefox或Chrome中不起作用？

問題描述

2 個解決方案

解決方案1
1 2014-10-27 20:59:36

解決方案2
0 已采納 2014-10-29 22:58:35

為什么HTML復選框功能僅在IE中有效，而在Firefox或Chrome中不起作用？

問題描述

2 個解決方案

解決方案1 1 2014-10-27 20:59:36

解決方案2 0 已采納 2014-10-29 22:58:35

解決方案1
1 2014-10-27 20:59:36

解決方案2
0 已采納 2014-10-29 22:58:35