Javascript 如何获取ON/OFF开关的值

我的web项目中有开/关开关：

HTML:

我想知道开关是打开还是关闭，我尝试使用下一个代码获取值，但它不起作用：

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

---

你知道如何获取开关的值吗？

使用

onoffswitch.checked

而不是

onoffswitch.style.content
使用
onoffswitch.checked
而不是
onoffswitch.style.content
更改为：

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



并将
isChecked
作为布尔值添加到ts文件中
 更改为：

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



并将
isChecked
作为布尔值添加到ts文件中
 您使用的是角度。所以使用

现在，您只需检查
this.onOff
即可查看开关是否处于“打开”状态。
您正在使用Angular。所以使用

您现在只需检查
this.onOff
即可查看开关是否处于“打开”状态。
如果您使用的是angular，只需使用名为双向绑定的its功能即可

参考：

对于您的问题解决方案：

如果使用angular，只需使用its的双向绑定功能即可

参考：

对于您的问题解决方案：

您可以尝试此解决方案

HTML文件（如app.component.HTML）

Css文件（app.component.Css）

以下是供参考的链接
您可以尝试此解决方案

HTML文件（如app.component.HTML）

Css文件（app.component.Css）

这是供参考的链接
您的整个“onoffswitch”概念看起来不合适。我认为没有办法通过E.style.content读取内容值。为什么您想从css中获取值，而css只对按钮的外观负责？你用的是哪个角度的版本？我相信这就是你想要的。。如果你在做拨动开关，你需要使用无线电输入。@HarunYılmaz我想检查开关是开还是关，Angular2你的整个“开-关”概念看起来不合适。我认为没有办法通过E.style.content读取内容值。为什么您想从css中获取值，而css只对按钮的外观负责？你用的是哪个角度的版本？我相信这就是你想要的。。如果你在做拨动开关，你需要使用无线电输入。@HarunYılmaz我想检查开关是开着还是关着，Angular2谢谢，你的解决方案帮了我，你的解决方案帮了我
    <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>

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

public onOff = false;

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

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

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