[英]How to get value of ON/OFF switch
I have On/Off switcher in my web project : 我的网络项目中有开/关切换器:
HTML: 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: 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? 您对如何获得开/关切换器的价值有任何想法吗?
使用onoffswitch.checked
代替onoffswitch.style.content
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. 并将
isChecked
作为布尔值添加到ts文件中。
You're using Angular. 您正在使用Angular。 So use NgModel .
因此,请使用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: 在您的TS文件中:
public onOff = false;
You can now simply check this.onOff
to see if your switch is "on" or not. 现在,您只需检查
this.onOff
即可查看您的开关是否“打开”。
If you are using angular just use the its feature called two way binding 如果您使用的是角度,请使用其称为双向绑定的功能
Ref : https://angular.io/api/forms/NgModel 参考: https : //angular.io/api/forms/NgModel
for your problem solution: 为您的问题解决方案:
https://stackblitz.com/edit/angular-wcaqhb https://stackblitz.com/edit/angular-wcaqhb
You Can try this solution 您可以尝试此解决方案
HTML file(eg app.component.html) HTML文件(例如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) Ts文件(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) CSS文件(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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.