使用输入复选框显示不同的div

Question

我要使用3个输入复选框来显示3个不同的div。我正在使用此代码，但是唯一的工作是“课程1”，我不知道为什么。我想这很简单，但我看不到：

document.getElementById('checkbox1');

checkbox1.onchange = function() {
  if (checkbox1.checked) {
    course1.style.display = 'block';
  } else {
    course1.style.display = 'none';

  }
};

document.getElementById('checkbox2');

checkbox2.onchange = function() {
  if (checkbox2.checked) {
    course2.style.display = 'block';
  } else {
    course2.style.display = 'none';

  }
};

document.getElementById('checkbox3');

checkbox3.onchange = function() {
  if (checkbox3.checked) {
    course3.style.display = 'block';
  } else {
    course3.style.display = 'none';

  }
};

<form>
  <label class="switch">
        <input type="checkbox" id="checkbox1" checked="true"> Course 1
      </label>
</form>

<form>
  <label class="switch">
        <input type="checkbox" id="checkbox2" checked="true"> Course 2
      </label>
</form>

<form>
  <label class="switch">
        <input type="checkbox" id="checkbox3" checked="true"> Course 3
      </label>
</form>

<br>
<div id="course1"> Text course 1
</div>
<br>
<div id="course2"> Text course 2
</div>
<br>
<div id="course2"> Text course 3
</div>

示例：https://codepen.io/antonioagar1/pen/dqGaoO

Answer 1

您可以尝试使用以下简单代码代替自己的代码：

 document.addEventListener("change", function(ev){
    if(ev.target.id.substr(0,8)=="checkbox") document.querySelector("[id='course"+ev.target.getAttribute("id").slice(-1)+"']").style.display=ev.target.checked?"block":"none";
 });

• 您有两个div，其ID为course2。首先，将其更改为course3，然后尝试。

Check result online