Javascript 我在使用复选框时遇到问题

（我是javascript的初学者）我在表单中有11个复选框，每个复选框旁边都有11个文本框/文本字段，每个复选框都带有css中的display:none（text fields）。 当用户使用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">

---

JS代码看起来只有一个复选框/字段，scince document.getElementByID只返回1个元素（第一个）

因此，您应该使用HTML类，而不是ID，Science ID的设计是独一无二的

当您将它们全部替换为类时，您可以使用

document.getElementByClassName（）

，它将返回一个数组if items，然后您可以使用某种循环来循环数组中的所有元素，并执行==true检查

您的JS代码如下所示：

function myFunction(){
    const checkBoxes=document.getElementsByClassName("mycheck");
    const fields= document.getElementsByClassName("field");
    
    checkBoxes.forEach((box, index) => {
        const field = fields[index];
        if(box.checked== true) {
            field.style.display="inline";
        } else {
            field.style.display="none";
        }
    });
}

我还修复了缩进，并将var替换为const，您永远不应该使用vars，这是一个旧的js特性，而应该使用let/const

Let与var相同，只是它在重新定义变量时警告您不应该这样做，这可以防止您意外地使用相同的名称创建两个变量

所以你应该：

let name = "hay"; // definition
name = "hey" // re assign

这将给出一个错误：

let name = "hay"; // definition
let name = "hey"; // re-definition (illegal with let)

另一方面，Const是一个JS特性，它允许您定义一个不能重新定义或分配的变量。这应该用于甚至不会设置为新值的变量，如元素数组

---

我还使用了一个.forEach循环，这是一种非常方便的方法，可以通过Javascript中的数组来循环

id=“mycheck”

替换

class=“mycheck”

，并删除此id。您可以使用类选择器

“.mycheck”

访问所有复选框。如果您的ID不唯一，那么您的代码将只对找到的第一个元素有效。

没有两个元素可以具有相同的ID。

function myFunction() {
  var checkBox = document.getElemenstByClassName("mycheck");
  var field = document.getElemensByClassName("field");
  checkBox.forEach((el, index) => {
    if (el.checked == true) {
      field[index].style.display = "inline";
    }
    else {
      field[index].style.display = "none";
    }
  })
  }

因此，我认为您应该更改ID并循环所有ID。或者您使用一个类并使用

document.getElementsByClassName（“类的名称”）

但是使用类会更加可靠和高效。
因为您对多个控件使用相同的ID。ID对于文档必须是唯一的。使用类名。
@Abhishek，您的问题可能有很多解决方案。我写了一个简单的解决方案，对你的决定有效。请检查我所做的以下编辑

myFunction
-您可以将
事件
作为参数接收
event.target
-这是您选中/取消选中的复选框
checkBox.value
-这是您编写的值（例如-

document.queryselectoral（“.mycheck”）.forEach（函数（el）{
el.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
if（e.target.parentElement.nextElementSibling.classList.contains（'field'））{
e、 target.parentElement.nextElementSibling.classList.remove（'field'）；
} 
否则{
e、 target.parentElement.nextElementSibling.classList.add（'field'）；
}
})
})；
.field{
显示：无；
}
I-A
I-B
I-C
I-D
II-A
II-B
II-C
II-D
III-A
III-B
III-C
ID必须是每个文档唯一的，请改用类。要获得相应的文本，您可以通过自定义
data
attributeCode来识别它们。不建议只回答这些问题。您介意解释代码工作的原因和更改的内容吗？您可以提供
mycheck-[value]
和`field-[value]用于简单的解决方案，而不是元素搜索。感谢您的建议@XueLong92
function myFunction() {
  var checkBox = document.getElemenstByClassName("mycheck");
  var field = document.getElemensByClassName("field");
  checkBox.forEach((el, index) => {
    if (el.checked == true) {
      field[index].style.display = "inline";
    }
    else {
      field[index].style.display = "none";
    }
  })
  }