复选框切换内容部分不适用于所有复选框答案

【问题标题】：Checkbox toggle content section not working for all checkboxes复选框切换内容部分不适用于所有复选框
【发布时间】：2021-09-16 21:48:28
【问题描述】：

我创建了 4 个带有详细信息的复选框切换，但同时当我单击另一个 3 个切换不起作用时，只有一个复选框切换起作用，我该如何更改 html 代码的脚本以使所有复选框都起作用。 P

<!-- Check box dropdown -->
<script>
function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
</script>
<!-- Check box dropdown -->

<div class="checkbox">
                     <label><input type="checkbox" id="chkNIRF" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                     <label><input type="checkbox" id="chkNAAC" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                     <label><input type="checkbox" id="chkINI" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                     <label><input type="checkbox" id="chkIoE" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                </div>
                
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>                
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>                
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>

带有html和javascript代码，请帮助解决问题...

【问题讨论】：

标签： javascript html jquery checkbox accordion

【解决方案1】：

您没有将复选框的 ID 提供给函数。

如果你解析 id，你的代码应该可以工作：

<input type="checkbox" id="chkNIRF" onclick="myFunction('chkNIRF')">

function myFunction(x) {
  // Get the checkbox
  var checkBox = document.getElementById(x);

根据您的 cmets，这里有一个按照您在评论中要求的小提琴：https://jsfiddle.net/zLvm46jw/1/

为 p-tags 添加单独的 id

【讨论】：

不工作......只有当我点击任何复选框时，此代码才被点击，但手风琴不起作用
我猜你做错了什么。在这个小提琴上工作：jsfiddle.net/zLvm46jw
感谢您的回复，非常感谢！但是当我点击复选框时我想要手风琴然后下面的内容应该显示。在小提琴中，所有文本都会出现而不点击复选框。
好吧-您没有在原始问题中指定。如果您想要另一个位置/文本，您需要为您的 P-tag 提供唯一的 ID，并将相应的标签解析到函数中。
让我们continue this discussion in chat.

【解决方案2】：

您可以在函数上使用事件参数，然后您可以像这样获取单击复选框的目标：

function myFunction(event) { // Set event argument
  var checkBox = event.target; // Get the clicked checkbox

而在 html 方面，您需要在函数中指定事件：

<input type="checkbox" id="chkNIRF" onclick="myFunction(event)">

【讨论】：

使用此代码后，只有第 4 个复选框手风琴正在工作
我工作正常吗 O.o @SandyS