拨动开关查找状态

Question

在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语句。

Answer 1

在复选框上创建一个EventListener，以便侦听新的更改。

在EventListener下，将有一个if语句检查.checked属性。如果是true，它将打印"Checked"如果是false，它将打印&;Not checked&;

的例子:

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>

Answer 2

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

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

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

Answer 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>

Answer 4

因为你使用的是一个复选框，你可以访问它的.checked属性在javascript

首先选择你的元素

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

然后编写一个函数来检查状态

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

Answer 5

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

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

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

Answer 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>