флажок не работает с несколькими флажок на клик

Question

function myFunction(){
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
}}

Checkbox 1: <input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox 1 is CHECKED!</p>
<br>
Checkbox 2: <input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox 2 is CHECKED!</p>

Я хочу, чтобы оба флажка работали после нажатия на него одного за другим. Результат, который я получаю: только флажок 1работает, другой не работает.

Answer 1

Дайте другой Id. Будет работать.

function myFunction(){
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
}}

function myFunction1(){
  var checkBox = document.getElementById("myCheck1");
  var text1 = document.getElementById("text1");
  if (checkBox.checked == true){
    text1.style.display = "block";
  } else {
    text1.style.display = "none";
}}

Checkbox 1: <input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox 1 is CHECKED!</p>
<br>
Checkbox 2: <input type="checkbox" id="myCheck1" onclick="myFunction1()">

<p id="text1" style="display:none">Checkbox 2 is CHECKED!</p>

Answer 2

Атрибут

id должен быть уникальным, поэтому в этом случае getElementById выбирает только первый элемент. Вы можете изменить атрибут id на class, а затем установить флажки и абзацы с помощью getElementsByClassName.

Checkbox 1: <input type="checkbox" class="myCheck" onclick="myFunction()">

<p class="text" style="display:none">Checkbox 1 is CHECKED!</p>
<br>
Checkbox 2: <input type="checkbox" class="myCheck" onclick="myFunction()">

<p class="text" style="display:none">Checkbox 2 is CHECKED!</p>

Теперь часть JavaScript должна распознавать флажки. Мы должны добавить цикл FOR, чтобы установить флажок [i] и абзац под ним.

for (var i=0;i<checkBox.length; i++) {
    if (checkBox[i].checked == true){
    text[i].style.display = "block";
  } else {
    text[i].style.display = "none";
  }
} 

См. Демонстрацию здесь