显示一次复选框后显示文本

Question

我希望在检查复选框后显示文本。它在我的复选框上没有课程的情况下完美效果，但是如果我在复选框上放了一堂课，我将无法显示文本。我需要在我的复选框中放置样式。这是我的代码，我想知道为什么JS会受到类属性的影响。

合同 检查复选框！

      <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>

Answer 2

您没有具有"文本" ID的元素，但是您正在尝试在这里获取一个：

var text = document.getElementById("text");

您可以将其添加到您的段落元素中：即 <p id="text">但这也会导致您的复选框消失。

Answer 3

如果使用Firefox尝试" Firebug"添加。它可以帮助您调试JavaScript或CSS中的问题。过去，它在过去帮助我很多次。链接在这里 - https://addons.mozilla.org/en-us/firefox/addon/firebug/