多个Checkbox切换内容功能仅单个生效如何修复？

• JS代码中硬编码获取id为myCheck的复选框，但你实际HTML中的4个复选框均未使用该id，导致无法正确获取到点击的复选框元素
• HTML中多个提示<p>重复使用了同一个id="text"，id属性在HTML文档中必须全局唯一，document.getElementById仅能返回匹配到的第一个元素，因此其余3个复选框对应的提示无法被找到

步骤1：修改JavaScript代码 #

修改函数逻辑，接收当前点击的复选框元素作为参数，根据复选框的id匹配对应的提示元素：

<!-- Check box dropdown -->
<script>
function myFunction(currentCheck) {
  // 按当前点击的复选框id匹配对应提示元素
  var text = document.getElementById("text-" + currentCheck.id);
  // 切换显示状态
  text.style.display = currentCheck.checked ? "block" : "none";
}
</script>
<!-- Check box dropdown -->

步骤2：修改HTML代码 #

调整提示元素的id，和复选框id一一对应，同时调用函数时传入当前点击的元素：

<div class="checkbox">
  <label>
    <input type="checkbox" id="chkNIRF" onclick="myFunction(this)">
    <p class="text-grey">Demo</p>
  </label>
  <label>
    <input type="checkbox" id="chkNAAC" onclick="myFunction(this)">
    <p class="text-grey">Demo</p>
  </label>
  <label>
    <input type="checkbox" id="chkINI" onclick="myFunction(this)">
    <p class="text-grey">Demo</p>
  </label>
  <label>
    <input type="checkbox" id="chkIoE" onclick="myFunction(this)">
    <p class="text-grey">Demo</p>
  </label>
</div>

<p id="text-chkNIRF" style="display:none">Checkbox is CHECKED!</p>
<p id="text-chkNAAC" style="display:none">Checkbox is CHECKED!</p>                
<p id="text-chkINI" style="display:none">Checkbox is CHECKED!</p>                
<p id="text-chkIoE" style="display:none">Checkbox is CHECKED!</p>

内容的提问来源于stack exchange，提问作者SandyS