Javascript toggle switch using data

Question

I have been trying to make a toggle switch that enables/disables a part of my program. The code I use for making the button is taken from here w3schools

Now I wanted to add the functionality to the button, but was completely stuck. What I want to do, is if the switch is pressed, I want my program to active part of my code which enables a setting, or if the switch is already on, to disable it.

So what I'm looking for, is a way to get the value of the switch somewhere, and using that in something like an if statement, like:

if(switch== on){ 
   //do this;
} else{ 
   //do that;
}

I hope it is clear what I wanted to say. Any help is appreciated.

Answer 1

Use the checked value of the checkbox element to see the current state

Also See Oded's answer on this post on the usage of the property within HTML.

Within JavaScript, you can retrieve the element in whatever flavour you like, and then simply see what the value of the checked attribute is.

Working Sample:

function getValue() {
   var isChecked = document.getElementById("myCheckBox").checked;
    
   if(isChecked){
     console.log("Input is checked");
   } else {
     console.log("Input is NOT checked");
   }
}

<label>
  <input id="myCheckBox" type="checkbox" > Toggle me
</label>

<br>
<br>

<button onclick="getValue()">Check value of above input</button>

Answer 2

I don't know if that is what you want, but often, you want to listen for an event that triggers when the checked state changes:

document.addEventListener('DOMContentLoaded', function () {
  var checkbox = document.querySelector('input[type="checkbox"]');

  checkbox.addEventListener('change', function () {
    if (checkbox.checked) {
      // do this
      console.log('Checked');
    } else {
      // do that
      console.log('Not checked');
    }
  });
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

When the browser parses your HTML and reaches a <script> tag, it immediately executes the JavaScript in it. It can however happen, that the rest of the document is not loaded yet.

This means that some of the HTML elements in the page don't exist yet, and you can't access them in JavaScript. You have to wait until the elements are loaded.

Fortunately, the browser fires an event when it is done loading the contents of the page. This event is called DOMContentLoaded.

When you wait for the browser to first fire the event, you can be sure that you can access all elements in the DOM.

Answer 3

It is just a checkbox. You can do like this -->

$(document).ready(function(){
	$('#on').on('change',function(){
    	if(this.checked){
    		$("#info").text("U checked me, place some code here");
    	}
        else{
        	$("#info").text("U unchecked me, another piece of code here");
        }
    });
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
  <input id="on" type="checkbox">
  <div class="slider"></div>
</label>
<p id="info"></p>

Just place your piece of code in if-else block.

Answer 4

Here is a really basic one:

function doStuff() {
    console.log("Hello World!")
}
function toggle(button) {
    if(button.value=="OFF") {
        button.value="ON"
        button.innerHTML="ON"
        this.interval = setInterval(doStuff, 1000);
    } else if(button.value=="ON") {
        button.value="OFF"
        button.innerHTML="OFF"
        clearInterval(this.interval)
    }
}

<button onclick="toggle(this)" value="OFF">OFF</button>

Answer 5

You can solve this using JQuery. Attach a change event to the input checkbox element.

<input type="checkbox" id="myToggle"/>

$('#myToggle').change(function(){
    if(this.checked) {
        do this;
    }
    else {
        do that;
    }
});