Css 角度6-更改复选框样式是否选中
我有一个复选框列表,我想在选中的复选框下面划线。我的代码如下所示: TS文件:Css 角度6-更改复选框样式是否选中,css,angular,checkbox,css-selectors,Css,Angular,Checkbox,Css Selectors,我有一个复选框列表,我想在选中的复选框下面划线。我的代码如下所示: TS文件: currentQuarter: string; quarters: Observable<MeseRiferimento[]>; q1: MeseRiferimento = new MeseRiferimento(); q2: MeseRiferimento = new MeseRiferimento(); ngOnInit() { q1.desc = "One"; q1.id = "1"; q2.d
currentQuarter: string;
quarters: Observable<MeseRiferimento[]>;
q1: MeseRiferimento = new MeseRiferimento();
q2: MeseRiferimento = new MeseRiferimento();
ngOnInit() {
q1.desc = "One";
q1.id = "1";
q2.desc = "Two";
q2.id = "2"
currentQuarter = q1.id;
quarters.of([q1, q2]);
}
isQuarterSelected(q: MeseRiferimento): boolean {
return this.currentQuarter === this.getKeyFromQuarter(q);
}
<div *ngFor="let q of quarters | async" class="col-1 my-auto m-stati">
<label class="custom-control custom-checkbox ra-check">
<input type="checkbox" class="custom-control-input" [ngClass]="{'checked': isQuarterSelected(q) }">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{q.descrizione}}</span>
</label>
</div>
.custom-control-input:checked~.custom-control-indicator {
color: #fff;
background-color: #3bb8eb;
}
以下是此代码的问题:1.当我加载页面时,默认选中复选框正确显示了类“已选中”,但未应用CSS,即未加下划线
2.当我手动选择复选框时,类“checked”正确应用,CSS也适用
3.当我手动选择另一个复选框时,类“checked”会正确地从一个切换到另一个,但前者的CSS不会更新,即前一个复选框保持下划线
谢谢你的建议
.custom-control-input:checked~.custom-control-indicator
:checked
并不意味着它已选中类,但它意味着它已实际选中。如果要选择选中的类,请使用点代替冒号:
.custom-control-input.checked~.custom-control-indicator
你能为上面的代码创建stackblitz吗?使用这个类。自定义控件输入。选中~。自定义控件指示器
根据你的代码,选中的类将根据你的情况添加。尝试此选项,希望它能帮助您选择所需的ngChecked
而不是ngClass
,因为ngClass
将添加一个类,而ngChecked
将选中您的复选框。