Why html checkbox function only works in IE but not in Firefox or Chrome?

问题

I'm debugging a JavaScript/JSP/Struts app, it has a checkbox, for advanced search, when it's checked, other 2 items are supposed to show up on the page for user to enter more info, yet this only works in IE, but not Firefox or Chrome, no response at all when it's checked on the other 2 browsers, why ? And how to make it work in all browsers ?

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

回答1:

I believe this simplified code sample here works as you intended it:

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

As I have never seen the format for declaring html elements, I would hazard a guess that your problem lies there, and the most likely cause is that the value attritube is not getting translated into id correctly on some browsers. You may want to stick to the standard html tags for web development.

To verify this is your problem in Firefox, try opening the console using ctrl-shift-k and you should get the following message when you click the advanced checkbox.

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

回答2:

After some research I found the answer, added "styleId" to the following solved the problem :

<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" after processing will be turned into Id="xyz" which will be identified by document.getElementById(), otherwise it will cause error because there is no Id in it.

来源：https://stackoverflow.com/questions/26596000/why-html-checkbox-function-only-works-in-ie-but-not-in-firefox-or-chrome

标签

javascript

html

checkbox

struts