How to get value of ON/OFF switch

Question

I have On/Off switcher in my web project :

HTML:

<div  class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" checked>
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

CSS:

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #93297E; color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

I want to know if the switcher is turned ON or OFF, I tried to get the value, using the next code, but it does not work:

getSwitcherValue(onoffswitch) {
   console.log("onoffswitch:"+onoffswitch.style.content);
}

Do you have any ideas how to get the value of on/off switcher?

Your whole "onoffswitch" concept looks inappropriate. I think there is no way to read the content value by E.style.content. https://stackoverflow.com/questions/2651739/how-to-access-css-generated-content-with-javascript — Okyo, Jun 25 '19 at 12:56
Why do you want to get value from `css` which is only responsible of the way the button looks? And which Angular version do you work with? — Harun Yilmaz, Jun 25 '19 at 12:57
I believe this is what you want, https://stackoverflow.com/questions/53930713/three-state-toggle-switch-in-angular .. You need to use radio input if you are making toggle switch.. — Maniraj Murugan, Jun 25 '19 at 12:57
@HarunYılmaz I want to check if switcher is on or off, angular2 — T.S, Jun 25 '19 at 12:58

score 0 · Answer 1 · answered Jun 25 '19 at 12:57

0

use onoffswitch.checked instead of onoffswitch.style.content

answered Jun 25 '19 at 12:57

Aditya

771
5
11

score 0 · Answer 2 · answered Jun 25 '19 at 13:00

Change to:

    <div  class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" [(ngModel)]="isChecked">
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

And add isChecked into your ts file as a boolean.

score 0 · Accepted Answer · answered Jun 25 '19 at 13:02

You're using Angular. So use NgModel.

<div  class="onoffswitch">
   <input type="checkbox" [(ngModel)]="onOff" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" checked>
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

And in your TS file:

public onOff = false;

You can now simply check this.onOff to see if your switch is "on" or not.

score 0 · Answer 4 · answered Jun 25 '19 at 13:03

0

If you are using angular just use the its feature called two way binding

Ref : https://angular.io/api/forms/NgModel

for your problem solution:

https://stackblitz.com/edit/angular-wcaqhb

answered Jun 25 '19 at 13:03

Kesavan R

649
1
5
23

Thank you, your solution helped me – T.S Jun 25 '19 at 13:15

score 0 · Answer 5 · answered Jun 25 '19 at 13:11

You Can try this solution

HTML file(eg app.component.html)

<div  class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" [checked]="isSwitched"
  (change)="getSwitcherValue(isSwitched)">
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

Ts File (app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isSwitched:boolean=true;
  getSwitcherValue(onoffswitch) {
    this.isSwitched=!this.isSwitched;
   console.log("onoffswitch:"+this.isSwitched);
}
}

Css File(app.component.css)

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #93297E; color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

Here is the Demo link for reference

How to get value of ON/OFF switch

5 Answers5