Extremely new at Javascript and have been stuck on an if/else statement, because I don't know how to find the status of the Toggle switch I created.

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

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

Extremely new at Javascript and have been stuck on an if/else statement, because I don't know how to find the status of the Toggle switch I created.

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

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

I just want to find the status as to whether or not the toggle has been switched, and then build an if/else statement from there.

• javascript

Share Improve this question Follow edited Oct 21, 2021 at 18:18 bZezzz 1,0021010 silver badges2222 bronze badges asked Oct 21, 2021 at 12:47 ANDERJ39ANDERJ39 1311 silver badge33 bronze badges 2

• 2 Does this answer your question? Get checkbox status using javascript – HamzaFarooq Commented Oct 21, 2021 at 12:50
• other than the given answers which are the conventional ones, you can also use onclick="myFunction()" then implement a simple JS toggle. this removes the need to use event listeners, and will also only run when you click on the checkbox. if someone wants to type out an answer for me I'm fine with it – UnidentifiedX Commented Oct 21, 2021 at 14:12

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Create an EventListener on the checkbox in order to listen for new changes.

Under the EventListener, there'll be an if statement that checks for .checked attribute. If true, it'll print "Checked". If false, it'll print "Not checked".

Example:

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>

You can use the checked property to return the checked state of a checkbox.

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

Look at this : https://www.w3schools./jsref/prop_checkbox_checked.asp

To get the checked status of input use elem.checked

Take a look at https://www.w3schools./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>

Since you are using a checkbox you can access its .checked property in javascript

first select your element

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

Secondly make a function to check the state

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

To check the state of the checkbox you can use the checked property

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

See https://www.w3schools./jsref/prop_checkbox_checked.asp

You can look for the checked attribute using the document interface and handle it with pure 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>