選中復選框后顯示文本

Question

我希望復選框選中后即可顯示文本。 在我的復選框上沒有任何類的情況下，它可以完美運行，但是如果在我的復選框上放置一個類，則無法顯示文本。 我需要在復選框中添加樣式。 這是我的代碼，我想知道為什么js受到class屬性的影響。

合同復選框已選中！

      <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

您沒有ID為“ text”的元素，但是您嘗試在此處獲取一個元素：

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

您可以將其添加到段落元素中，即<p id="text">但這也會導致您的復選框消失。

Answer 2

您的代碼對我來說很好。

 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 3

如果您使用的是Firefox，請嘗試添加“ firebug”。 它可以幫助您調試javascript或css中的問題。 至少在過去，它對我有很多幫助。 這是鏈接-https : //addons.mozilla.org/en-US/firefox/addon/firebug/