我正在调试一个 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>
...
最佳答案
我相信这里的简化代码示例可以按照您的预期工作:
<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
关于javascript - 为什么 html 复选框功能只能在 IE 中使用，而在 Firefox 或 Chrome 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26596000/