(我是 javascript 的初学者)我在一个表单中有 11 个复选框以及每个复选框旁边的 11 个文本框/文本字段，显示:无(文本字段)在 CSS 中。
我正在尝试显示特定的文本字段 当用户点击 相应的复选框 使用 javascript 但它是 未显示所有复选框 它仅适用于第一个复选框。
这是我的html代码:
<label class="container2">I-A
<input type="checkbox" value="IA" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">I-B
<input type="checkbox" value="IB" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">I-C
<input type="checkbox" value="IC" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">I-D
<input type="checkbox" value="ID" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-A
<input type="checkbox" value="IIA" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-B
<input type="checkbox" value="IIB" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-C
<input type="checkbox" value="IIC" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-D
<input type="checkbox" value="IID" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">III-A
<input type="checkbox" value="IIIA" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">III-B
<input type="checkbox" value="IIIB" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">III-C
<input type="checkbox" value="IIIC" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
function myFunction(){
var checkBox=document.getElementById("mycheck");
var field= document.getElementById("field");
if(checkBox.checked== true){
field.style.display="inline";
}
else{
field.style.display="none";
}
}
最佳答案
@Abhishek，您的问题可能有很多解决方案。我写了一个简单的解决方案，适用于您的决定。请检查我所做的以下编辑。
myFunction - 您可以收到event作为参数。 event.target - 这是您选中/未选中的复选框。 checkBox.value - 这是你写的值(例如 - <input type="checkbox" value="IA" )'field-' + checkBox.value - 这会让你选择id的输入字段。 (例如 - field-IA)** 还需要提一件事:请不要使用相同的
id对于每个元素。您可以将 ID 命名为 field-for-something或 mycheck-for-something .function myFunction(event){
var checkBox = event.target;
var field = document.getElementById('field-' + checkBox.value);
if(checkBox.checked == true){
field.style.display="inline";
}
else{
field.style.display="none";
}
}body {
display: flex;
flex-direction: column;
}
input[name="dep[]"] {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<label class="container2">I-A
<input type="checkbox" value="IA" name="checkbox[]" id="mycheck-IA" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IA">
<label class="container2">I-B
<input type="checkbox" value="IB" name="checkbox[]" id="mycheck-IB" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IB">
<label class="container2">I-C
<input type="checkbox" value="IC" name="checkbox[]" id="mycheck-IC" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IC">
<label class="container2">I-D
<input type="checkbox" value="ID" name="checkbox[]" id="mycheck-ID" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-ID">
<label class="container2">II-A
<input type="checkbox" value="IIA" name="checkbox[]" id="mycheck-IIA" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IIA">
<label class="container2">II-B
<input type="checkbox" value="IIB" name="checkbox[]" id="mycheck-IIB" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IIB">
<label class="container2">II-C
<input type="checkbox" value="IIC" name="checkbox[]" id="mycheck-IIC" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IIC">
<label class="container2">II-D
<input type="checkbox" value="IID" name="checkbox[]" id="mycheck-IID" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IID">
<label class="container2">III-A
<input type="checkbox" value="IIIA" name="checkbox[]" id="mycheck-IIIA" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IIIA">
<label class="container2">III-B
<input type="checkbox" value="IIIB" name="checkbox[]" id="mycheck-IIIB" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IIIB">
<label class="container2">III-C
<input type="checkbox" value="IIIC" name="checkbox[]" id="mycheck-IIIC" onclick="myFunction(event)">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field-IIIC">
</body>
</html>关于javascript - 我在使用复选框时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63847772/