如何使用javascript檢測html開關狀態

Question

我有一個 HTML 開關按鈕（開/關），我需要用 JavaScript 檢測它是打開還是關閉。 請幫助如何做到這一點？

這是我的開關小提琴

Answer 1

為復選框元素添加一個“onchange”事件。 請參閱下面的代碼。

<div style="text-align: center;">
   <div class="switch">
      <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox" onchange="javascript:myFunction()">
      <label for="cmn-toggle-2"></label>
   </div>
</div>

<script>
    function myFunction() {
       alert(document.getElementById("cmn-toggle-2").checked);
    }
</script>

Answer 2

嘗試這個

 // checking wether the switch is on or off var cb = document.getElementById("cmn-toggle-2"); cb.onchange = function() { if (cb.checked) alert('The Switch is ON!'); else alert('The Switch is OFF!'); }

 .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; } input.cmn-toggle-round + label { padding: 2px; width: 120px; height: 60px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round + label:before { right: 1px; background-color: #f1f1f1; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round + label:after { width: 58px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round:checked + label:before { background-color: #8ce196; } input.cmn-toggle-round:checked + label:after { margin-left: 60px; }

 <div style="text-align: center;"> <div class="switch"> <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-2"></label> </div> </div>