html - 打字稿和 html 切换开关值

Question

简而言之，我需要使用拨动开关来确定将调用我的哪些方法。所以我猜你可以得到一个布尔值，指的是开关是打开还是关闭？但我怎么得到呢？

所以我在 html 中实现了一个切换开关

<label class="switch">
 <input type="checkbox" id="ToggleswitchId" >
 <span class="slider round"></span>
</label>

我见过有人用javascript做这样的事情。

 var switchTrueFalse = document.getElementById('ToggleswitchId').checked

但我得到的只是“HTMLElement 类型上不存在“已检查的属性””

Answer 1

您需要在选中/取消选中复选框时调用 JavaScript 函数。

function test() {
    var switchTrueFalse = document.getElementById('ToggleswitchId').checked;
    console.log(switchTrueFalse);
}
    

<label class="switch">
  <input type="checkbox" id="ToggleswitchId" onclick="test()" >
  <span class="slider round"></span>
</label>

Answer 2

checked不是一种方法。它是<input>布尔值的属性之一。

所以，document.getElementById('ToggleswitchId').checked检查时返回true

Answer 3

由于它是输入标签，请尝试使用HTMLInputElement而不是HTMLElement.

尝试使用此代码，看看它是否有效：

document.getElementById("ToggleswitchId") as HTMLInputElement).checked

Answer 4

checked是复选框输入的一个属性，它返回真或假。

function clickCheckbox() {
  if (document.getElementById('ToggleswitchId').checked) {
    console.log("check")
  } else {
    console.log("uncheck");
  }
}

<label class="switch">
 <input type="checkbox" id="ToggleswitchId" onClick="clickCheckbox()" >call method
 <span class="slider round"></span>
</label>