查找拨动开关的状态答案

【问题标题】：Finding Status of Toggle Switch查找拨动开关的状态
【发布时间】：2021-10-21 12:47:25
【问题描述】：

Javascript 非常新，一直停留在 if/else 语句上，因为我不知道如何找到我创建的 Toggle 开关的状态。

if ( ? ? ? myToggle == "True" ? ? ? ) {
  do this;
} else {
  do this;
}

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

我只想找到切换开关是否已切换的状态，然后从那里构建一个 if/else 语句。

【问题讨论】：

这能回答你的问题吗？ Get checkbox status using javascript
除了给定的答案是常规答案外，您还可以使用onclick="myFunction()" 然后实现一个简单的JS切换。这消除了使用事件侦听器的需要，并且仅在您单击复选框时才会运行。如果有人想为我输入答案，我可以接受

标签： javascript

【解决方案1】：

在复选框上创建一个EventListener 以监听新的变化。

在EventListener 下，将有一个if 语句将检查.checked 属性，如果true，它将打印“已检查”，如果false，它将打印“未检查”。

例子：

var element = document.getElementById("myToggle");
element.addEventListener("change", function (event) {
    if (event.target.checked) {
        console.log("Checked");
    } else {
        console.log("Not checked");
    }
});

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

【讨论】：

这是一个有趣的建议，但对于手头的问题可能有点矫枉过正。 OP 承认是 JS 的初学者，事件监听器之类的功能可能还太高级了。其他答案为 OP 的问题提供了一个更简单、更中肯的答案，您的优势在于提供不同的东西，这些东西在某些情况下可能更有用（尽管可能不是这个）。
@joH1 好的。谢谢。我试图通过一些解释使答案更简单。我的回答可能对 OP 没有帮助，但将来可能会对其他人有所帮助。

【解决方案2】：

您可以使用checked 属性返回复选框的checked 状态。

if ( document.getElementById("myToggle").checked === true ) {
// do something
} else {
// do something else
}

看看这个： https://www.w3schools.com/jsref/prop_checkbox_checked.asp

【讨论】：

就是这样！感谢您的答复。我知道必须有一种简单的方法来解决它，而不会弄乱函数和所有的爵士乐。

【解决方案3】：

要获取输入的检查状态，请使用elem.checked

看看https://www.w3schools.com/jsref/prop_checkbox_checked.asp

if (document.getElementById('myToggle').checked) {
  console.log('Toggle is checked')
} else {
  console.log('Toggle is not checked')
}

if (document.getElementById('myToggle2').checked) {
  console.log('Toggle 2 is checked')
} else {
  console.log('Toggle 2 is not checked')
}

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

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

【讨论】：

【解决方案4】：

由于您使用的是复选框，因此您可以在 javascript 中访问其 .checked 属性

首先选择你的元素

const element = document.querySelector(".input")

第二次做一个检查状态的函数

function checkState() {
  const checked = element.checked;
  if (checked) {
   // do things here
  } else { // do things here }
}

【讨论】：

【解决方案5】：

要检查复选框的状态，您可以使用选中的属性

if (document.getElementById("myToggle").checked){
   //do something
}else{
  //do something else
}

看 https://www.w3schools.com/jsref/prop_checkbox_checked.asp

【讨论】：

【解决方案6】：

可以使用文档接口查找checked属性，用纯JS处理。

function isChecked(){
  var c = document.getElementById('myToggle');
  if (c.checked) {
    console.log("checked");
  } else { 
    console.log("not checked");
  }
}

<label class="switch">
    <input type="checkbox" id="myToggle">
    <span class="slider round"></span>
    <button onclick="isChecked()">Check and then click here</button>
</label>

【讨论】：