为什么HTML复选框功能仅在IE中有效，而在Firefox或Chrome中不起作用？
[英]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 ? 
我正在调试一个JavaScript / JSP / Struts应用程序，它具有一个复选框，可以进行高级搜索，如果选中该复选框，则应该在页面上显示其他2个项目供用户输入更多信息，但这仅在IE中有效，但不是Firefox或Chrome，在其他2种浏览器上进行检查时完全没有响应，为什么？ 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>
...
2 个解决方案
解决方案1
1 2014-10-27 20:59:36
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. 由于我从未见过声明html元素的格式，因此我很可能会猜测您的问题就在这里，最可能的原因是attritube的值未在某些浏览器中正确转换为id。 You may want to stick to the standard html tags for web development. 您可能要坚持使用标准html标签进行Web开发。
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. 要验证这是Firefox中的问题，请尝试使用ctrl-shift-k打开控制台，然后单击高级复选框，应该会收到以下消息。
TypeError: document.getElementById(...) is null
解决方案2
0 已采纳 2014-10-29 22:58:35
After some research I found the answer, added "styleId" to the following solved the problem : 经过一番研究，我找到了答案，在下面的问题中添加了“ 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" 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. 处理后的styleId =“ xyz”将被转换为id =“ xyz”，将由document.getElementById（）进行标识，否则将因为其中没有ID而导致错误。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.