如何使單擊復選框文本 position 更改

Question

我要做的是在下面的代碼中，當我單擊選中的測試段落顯示在中心時，當我取消單擊復選框時，測試段落顯示在右側，使用 css html ZDE9B9ED78D7E2E1DCEEFFEE780E2F91

但在我下面的代碼中它不會發生。

我們該怎么辦？

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

 <label for="myCheck">Checkbox:</label> <input type="checkbox" id="myCheck" onclick="myFunction()"> <p id="text" style="display:none">test!</p>

如果有任何幫助，非常感謝。

Answer 1

 const myChk = document.getElementById("myCheck"), elText = document.getElementById("text"); myChk.onclick = e => { if (myChk.checked && elText.className === 'noDisplay' ) text.className = '' if (.myChk.checked && elText.className === '' ) text.className = 'rightDisplay' }

 #text { width: 200px; height: 100px; padding: 10px 20px; background-color: pink; }.noDisplay { display: none }.rightDisplay { float: right }

 <label>Checkbox: <input type="checkbox" id="myCheck" > </label> <div id="text" class="noDisplay" >test!</div>