CODEWITHSUNDEEP
javascript
ANDERJ39
ANDERJ39

Reputation: 13

Finding Status of Toggle Switch

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.

Upvotes: 1

Views: 5139

Answers (6)

Ghost
Ghost

Reputation: 5049

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>

Upvotes: 4

ecunniet
ecunniet

Reputation: 14

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

Upvotes: 0

Ran Turner
Ran Turner

Reputation: 18116

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>

Upvotes: 0

Alexander Kolberg
Alexander Kolberg

Reputation: 52

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

Upvotes: 0

Markiesch
Markiesch

Reputation: 759

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

Upvotes: 0

bZezzz
bZezzz

Reputation: 1002

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>

Upvotes: 0

Related Questions