javascript - 选中复选框后显示文本

Question

我希望在选中复选框后显示文本。它在我的复选框上没有类的情况下工作得很好，但如果我在我的复选框上放一个类，我就无法显示我的文本。我需要在我的复选框中添加样式。这是我的代码，我想知道为什么js会受到类属性的影响。

契约(Contract) 复选框已选中!

      <script>
           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";                                                                      
                         }
                      }
             </script>

Answer 1

你的代码对我来说工作得很好。

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";
  }
}

.flat {
  display: inline-block;
  width: 20px;
}

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