Finding Status of Toggle Switch

Question

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.

Does this answer your question? [Get checkbox status using javascript](https://stackoverflow.com/questions/6204885/get-checkbox-status-using-javascript) — HamzaFarooq, Oct 21 '21 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, Oct 21 '21 at 14:12

Kevin M. Mansour · Answer 1 · 2023-01-24T21:16:42.757

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>

edited Jan 24 '23 at 21:16

answered Oct 21 '21 at 13:04

Kevin M. Mansour

2,915
6
18
35

This is an interesting suggestion, but probably overkill for the problem at hand. OP admitted to be a beginner in JS and features like event listeners may be too advanced yet. The other answers give a simpler and more to-the-point answer to OP's issue, your has the advantage of providing something different which can be more useful in certain contexts (though probably not this one). – joH1 Oct 21 '21 at 13:42
@joH1 OK. Thanks. I've tried to make the answer more simpler with a little explanation. My answer may not help the OP, but probably it'll help other people in the future. – Kevin M. Mansour Oct 21 '21 at 13:57

score 0 · Answer 2 · answered Oct 21 '21 at 12:53

To get the checked status of input use elem.checked

Take a look at 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>

score 0 · Answer 3 · answered Oct 21 '21 at 12:53

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

score 0 · Answer 4 · answered Oct 21 '21 at 12:54

0

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.com/jsref/prop_checkbox_checked.asp

answered Oct 21 '21 at 12:54

Alexander Kolberg

54
5

score 0 · Answer 5 · answered Oct 21 '21 at 12:57

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>

score 0 · Accepted Answer · edited Oct 21 '21 at 18:28

0

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.com/jsref/prop_checkbox_checked.asp

edited Oct 21 '21 at 18:28

Anas Al Hamdan

768
1
5
18

answered Oct 21 '21 at 12:57

ecunniet

14
3

This was it! Thank you for the reply. I knew there had to be a simple way of figuring it out without messing with functions and all that jazz. – ANDERJ39 Oct 21 '21 at 15:15

Finding Status of Toggle Switch

6 Answers6