Question

我有3个输入复选框。如果选中，它们每个都会显示一个div。因为这三个具有相同的JS，所以我决定只有一个JS，其中包含3个变量（每个输入一个），但是它不起作用。在我拥有三个独立的JS之前，它运行良好。

代码

document.getElementById()

var cb1 = document.getElementById('checkbox1'); checkbox1.onchange = {
if (checkbox1.checked) {
  course1.style.display = 'block';
} else {
  course1.style.display = 'none';
};
var cb2 = document.getElementById('checkbox2'); checkbox2.onchange = {
if (checkbox2.checked) {
  course2.style.display = 'block';
} else {
  course2.style.display = 'none';
};
var cb3 = document.getElementById('checkbox3'); checkbox3.onchange = {
if (checkbox3.checked) {
  course3.style.display = 'block';
} else {
  course3.style.display = 'none';
};

<form>
  <label class="switch">
    <input type="checkbox" id="checkbox1"> Course 1
  </label>
</form>

<form>
  <label class="switch">
    <input type="checkbox" id="checkbox2"> Course 2
  </label>
</form>

<form>
  <label class="switch">
    <input type="checkbox" id="checkbox3"> Course 3
  </label>
</form>
<br>
<div id ="course1">
  Text course 1 
</div>
<br>
<div id ="course2">
  Text course 2 
</div>
<br>
<div id ="course3">
  Text course 3 
</div>

提琴：https://codepen.io/antonioagar1/pen/YOwBeE?editors=1010

Answer 1

修复语法错误后（识别非常重要，如果代码中的正确性，您会发现有很多if语句未正确关闭）

好吧，除了这些错误之外，我还设法为您提供了一种方法，即您只需要一个函数即可实现所需的结果。

如果您在HTML部分中看到，您会注意到我向复选框和div添加了一些新属性，称为data-idCheck，其中带有data-idCheck的复选框将显示div具有相同的属性。

请在下面检查我的代码是否对您有帮助。

var cb1 = document.getElementById('checkbox1');
cb1.onchange = checkChecked;
var cb2 = document.getElementById('checkbox2');
cb2.onchange = checkChecked;
var cb3 = document.getElementById('checkbox3');
cb3.onchange = checkChecked;

function checkChecked(){  
  let idCheck = this.getAttribute("data-idCheck");
  let relatedDiv = document.querySelector("div[data-idCheck='" + idCheck + "']");
  if (this.checked) {  
      relatedDiv.style.display = 'block';
    } else {
      relatedDiv.style.display = 'none';
    }
}

.hiddenDiv{
  display: none;
}

<form>
  <label class="switch">
    <input type="checkbox" id="checkbox1" data-idCheck="1"> Course 1
  </label>
</form>

<form>
  <label class="switch">
    <input type="checkbox" id="checkbox2" data-idCheck="2"> Course 2
  </label>
</form>

<form>
  <label class="switch">
    <input type="checkbox" id="checkbox3" data-idCheck="3"> Course 3
  </label>
</form>
<br>
<div id ="course1" class="hiddenDiv" data-idCheck="1">
  Text course 1 
</div>
<br>
<div id ="course2" class="hiddenDiv"  data-idCheck="2">
  Text course 2 
</div>
<br>
<div id ="course3" class="hiddenDiv"  data-idCheck="3">
  Text course 3 
</div>

使用一个具有不同var

1 个答案: