How to save on off conditions in a switch to a variable

Question

Not sure a similar question has been asked before. If so please point it out.

Of course I am new to this field. So please bear with me.

I have a html webpage which contains 6 switches.

I need to save on and off conditions of those switches into different variables.

on = 1 off = 0

As an instance, switch 1 on/off conditions represents x variable.

 when on x=1 off x=0

switch 2 on/off conditions represents y variable.

 when on y=1 off y=0

my page views as follows.

My code:

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .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%; } */

 <h2>Toggle Switch</h2> <label name="s" class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label><br><br> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label><br><br> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label><br><br> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label><br><br> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label><br><br> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label><br><br> <label class="switch"> <input type="checkbox"> </label> <label class="switch"> <input type="checkbox" checked> </label>

Can someone help me to save these switch conditions into different variables? I would really appreciate it.

Thanks heaps!

Answer 1

Create a JavaScript function to handle the switch change:

<script type="text/JavaScript">
var switchValues = { };
function switched (switchElement) {
  switchValues[switchElement.id] = switchElement.checked;
}
</script>

Then make sure each of your checkbox switches has a unique id attribute and onclick handler assigned to your new function:

<label name="s" class="switch">
      <input type="checkbox" id="switch1" onclick="switched(this)" checked>
      <span class="slider"></span>
    </label><br><br>

    <label class="switch">
      <input type="checkbox" id="switch2" onclick="switched(this)" checked>
      <span class="slider"></span>
    </label><br><br>

    <label class="switch">
      <input type="checkbox" id="switch3" onclick="switched(this)" checked>
      <span class="slider"></span>
    </label><br><br>

    <label class="switch">
      <input type="checkbox" id="switch4" onclick="switched(this)" checked>
      <span class="slider"></span>
    </label><br><br>

    Etc...

Answer 2

I have added the use of LocalStorage to keep switch positions

values are inside switchList object:

const switchList = 
      {​ switch_1: true
      ,​ switch_2: true
      ,​ switch_3: true ​
      , switch_4: true
      ,​ switch_5: true
      ,​ switch_6: true
      }

diretly build from the input checkbox list

You also need a form!

so when form element get any input change, by using event delegation you can set the checkbox value inside the switchList

then the switchList is copied into local storage

 const switchersF = document.querySelector('form#switchers') , memoSwitch = 'SwitchStorage' , switchList = [...switchers.querySelectorAll('input[type=checkbox]')].reduce((s,el)=>{ s[el.name]=true;return s},{}) ; initSwitchs() ; switchersF.onsubmit=e=>e.preventDefault() // disable submit form ; switchersF.oninput=e=> { if (!e.target.matches('input[type=checkbox]')) return switchList[e.target.name] = e.target.checked setSwitchsMemo() // console.log( switchList ) } function initSwitchs() { let SwitchsMemo = localStorage.getItem(memoSwitch) if (!SwitchsMemo) { setSwitchsMemo() } else { for (let [key, value] of Object.entries( JSON.parse(SwitchsMemo) )) { switchersF[key].checked = value } } } function setSwitchsMemo() { localStorage.setItem(memoSwitch, JSON.stringify(switchList) ) }

 #switchers label { position: relative; display: block; float: left; clear: both; width: 60px; height: 34px; margin: .5em 1em; } #switchers input { display: none; } #switchers span { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } #switchers span:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } #switchers input:checked+span { background-color: #2196F3; } #switchers input:checked+span:before { transform: translateX(26px); } #switchers input:focus+span { box-shadow: 0 0 1px #2196F3; }

 <h2>Toggle Switch</h2> <form id="switchers"> <label> <input type="checkbox" checked name="switch_1"> <span></span> </label> <label> <input type="checkbox" checked name="switch_2"> <span></span> </label> <label> <input type="checkbox" checked name="switch_3"> <span></span> </label> <label> <input type="checkbox" checked name="switch_4"> <span></span> </label> <label> <input type="checkbox" checked name="switch_5"> <span></span> </label> <label> <input type="checkbox" checked name="switch_6"> <span></span> </label> </form>