jquery - 使用jquery单击复选框时无法显示/隐藏其他字段
问题描述
我正在尝试根据复选框输入选择显示和隐藏复选框下方的文本字段（从文档级别到我想要隐藏和显示的状态）。但它只隐藏文本而不是表格边框。请建议我哪里出错了？我在表单标签中使用了表格标签。当我运行 index.jsp 时，复选框（文档级别到状态）下面的字段应该被隐藏。
这是 index.jsp 页面
<%@page import="java.util.Properties" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
h2 {
text-shadow: 2px 2px 5px red;
}
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
margin: 70px auto;
border: 2px solid blue;
border-style: inset;
border-radius: 8px;
background-color: aliceblue;
top: 0;
padding: 15px;
}
#back_form {
justify-content: center;
}
.right {
text-align: right;
float: right;
}
#wgtmsr {
width: 153px;
}
.hidden {
display: none;
}
</style>
<script type="text/javascript">
function showHide() {
var checkbox = document.getElementById("chk");
var hiddeninputs = document.getElementsByClassName("hidden");
for (var i = 0; i != hiddeninputs.length; i++) {
if (checkbox.checked) {
hiddeninputs[i].style.display = "block";
} else {
hiddeninputs[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<br><br><br><br>
<div id="Registercontainer">
<div class="RegForm">
<div id="back_glob">
<div id="back_form">
<form action="UploadServletClass" method="post" enctype="multipart/form-data">
<center>
<h2>Upload a New Document</h2>
</center>
<table width="400px" align="center" border="2">
<tr>
<td align="center" colspan="2">Form Details</td>
</tr>
<tr>
<td>Z id</td>
<td>
<input type="text" required="" name="zid" />
</td>
</tr>
<tr>
<td>First Name</td>
<td>
<input list="firstnamelist" required="" name="firstname" />
<datalist id="firstnamelist">
<option value="Anjali">Anjali</option>
<option value="Mukund">Mukund</option>
<option value="Pradyumna">Pradyumna</option>
<option value="Santosh">Santosh</option>
<option value="Arun">Arun</option>
<option value="Ramesh">Ramesh</option>
<option value="Nachiket">Nachiket</option>
<option value="Rajendra">Rajendra</option>
</datalist>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input list="lastnamelist" required="" name="lastname" />
<datalist id="lastnamelist">
<option value="Gadkar">
<option value="Kale">
<option value="Kulkarni">
<option value="Shinde">
</datalist>
</td>
</tr>
<tr>
<td>Mail id</td>
<td>
<input type="email" required="" name="mailid" />
</td>
</tr>
<tr>
<td>Division</td>
<td>
<select name="division" id="wgtmsr">
<option value=""></option>
<option value="B">B</option>
<option value="Z">Z</option>
<option value="I">I</option>
<option value="CF">CF</option>
<option value="P">P</option>
</select>
</td>
</tr>
<tr>
<td>Department</td>
<td>
<select name="department" id="wgtmsr">
<option value=""></option>
<option value="IT">IT</option>
<option value="Finance">Finance</option>
<option value="Logistics">Logistics</option>
<option value="Design">Design</option>
</select>
</td>
</tr>
<tr>
<td>Cost Center Code</td>
<td>
<select name="costcentercode" id="wgtmsr">
<option value=""></option>
<option value="000">000</option>
<option value="111">111</option>
<option value="121">121</option>
<option value="222">222</option>
<option value="222">222</option>
<option value="222">222</option>
<option value="222">222</option>
<option value="222">222</option>
<option value="222">222</option>
</select>
</td>
</tr>
<tr>
<td>Document Number</td>
<td>
<input type="text" required="" name="documentnumber" />
</td>
</tr>
<tr>
<td>Document Name</td>
<td>
<input type="text" required="" name="documentname" />
</td>
</tr>
<tr>
<td>Document Type</td>
<td>
<select name="Document_Type" id="wgtmsr">
<option value=""></option>
<option value="Agreement">Agreement</option>
<option value="Contract">Contract</option>
<option value="PO">PO</option>
<option value="Invoice">Invoice</option>
<option value="COA">COA</option>
<option value="Lease Deed">Lease Deed</option>
<option value="AMC">AMC</option>
<option value="Direct Material">Direct Material</option>
<option value="Indirect Material/Services">Indirect Material/Services</option>
</select>
</td>
</tr>
<br><br>
<tr>
<td>Document Category</td>
<td>
<select name="Document_Category" id="wgtmsr">
<option value=""></option>
<option value="Customer">Customer</option>
<option value="Vendor">Vendor</option>
<option value="Internal">Internal</option>
</select>
</td>
</tr>
<tr>
<td>Document Classification</td>
<td>
<select name="Document_Classification" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<br><br>
<tr>
<td>Modifier</td>
<td>
<input type="text" required="" name="modifier" />
</td>
</tr>
<tr>
<td>Authorised By</td>
<td>
<input type="text" required="" name="authorisedby" />
</td>
</tr>
<tr>
<td>From date</td>
<td>
<input type="date" required="" name="fromdate" />
</td>
</tr>
<tr>
<td>To Date</td>
<td>
<input type="date" required="" name="todate" />
</td>
</tr>
<!–– Code for QMS start ––>
<tr>
<td><label for="chk">QMS</label></td>
<td>
<input type="checkbox" name="chk" id="chk" value="check" onclick="showHide()" />
</td>
</tr>
<tr>
<td><label class="hidden">Document Level</label></td>
<td>
<select name="documentlevel" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<tr>
<td><label class="hidden">Document 00 General</label></td>
<td>
<select name="document00general" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<tr>
<td><label class="hidden">Serial Number</label></td>
<td>
<input type="text" name="serialnumber" class="hidden" />
</td>
</tr>
<tr>
<td><label class="hidden">Revision No.</label></td>
<td>
<select name="rivisionnumber" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<tr>
<td><label class="hidden">Issuer</label></td>
<td>
<input type="text" name="issuer" class="hidden" />
</td>
</tr>
<tr>
<td><label class="hidden">Status</label></td>
<td>
<select name="status" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<!–– Code for QMS end ––>
<tr>
<td>Select File</td>
<td>
<input type="file" name="fileName" multiple="multiple" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" name="Submit" />
</td>
</tr>
</table>
</form>
<br>
<center><a href="filelist.jsp">View List</a></center>
</div>
</div>
</div>
</div>
</body>
</html>解决方案
我在你的代码中没有发现问题。我刚刚使用了您的代码并创建了小提琴，它看起来工作正常。如果您有任何其他问题，请告诉我。
function showHide() {
var checkbox = document.getElementById("chk");
var hiddeninputs = document.getElementsByClassName("hidden");
for (var i = 0; i != hiddeninputs.length; i++) {
if (checkbox.checked) {
hiddeninputs[i].style.display = "block";
} else {
hiddeninputs[i].style.display = "none";
}
}
}.right {
text - align: right;
float: right;
}
#wgtmsr {
width: 153 px;
}
.hidden {
display: none;
}<tr>
<td><label for="chk">QMS</label></td>
<td>
<input type="checkbox" name="chk" id="chk" value="check" onclick="showHide()" />
</td>
</tr>
<tr>
<td><label class="hidden">Document Level</label></td>
<td>
<select name="documentlevel" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<tr>
<td><label class="hidden">Document 00 General</label></td>
<td>
<select name="document00general" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<tr>
<td><label class="hidden">Serial Number</label></td>
<td>
<input type="text" name="serialnumber" class="hidden" />
</td>
</tr>
<tr>
<td><label class="hidden">Revision No.</label></td>
<td>
<select name="rivisionnumber" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>
<tr>
<td><label class="hidden">Issuer</label></td>
<td>
<input type="text" name="issuer" class="hidden" />
</td>
</tr>
<tr>
<td><label class="hidden">Status</label></td>
<td>
<select name="status" class="hidden" id="wgtmsr">
<option value=""></option>
<option value="Public">Public</option>
<option value="Team">Team</option>
<option value="User">User</option>
</select>
</td>
</tr>推荐阅读
- linux - 为什么 Jenkins 构建按计划停止工作？
- scala - scala 可以从 `Long` 隐式转换为 `AnyRef`
- ios - 使用自定义视图单击搜索时 UISearchBar 不断下降
- macos - 如何在 MacOS 上通过 Selenium 和 Java 粘贴剪贴板中复制的文本
- excel - 如何设置 Allowed_Types 以保护此查询免受其他类型扩展文件的影响
- javascript - 如何从 inputTextarea 中读取文本作为 javascript 对象
- javascript - 如何从 raw.githubusercontent.com 检索 txt 文件并查找和替换字符？
- postgresql - 如何通过 Aqueduct 3 中的嵌套连接过滤查询？
- laravel - Laravel 通知想要在通知刀片模板中使用视图 html
- sql-server - 如何将数据添加到单个列