离子复选框:选中不工作角2离子2

Question

我想在选中离子复选框时执行css。但离子复选框:复选不执行。

​

我想突出它下面的所有列。

这就是我所做的。

**Html文件

<ion-row class = "DefaultBundle">
    <ion-col col-4>Description of Services</ion-col>
    <ion-item col-4 style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Full Service Agency</ion-label>
        <ion-checkbox class = "Bundle1"></ion-checkbox> // <-- Here's the check box
    </ion-item>
    <ion-item col-4 [hidden] = "!DefaultBundle.checked" style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Frost & Co Lite</ion-label>
        <ion-checkbox class = "Bundle2"></ion-checkbox>
    </ion-item>
</ion-row>

以下是我想强调的一些领域。

<ion-row>
    <ion-col>Market Appraisal</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>For Sale Board</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>Rightmove Portal Listing</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>

这是我的CSS。

.Bundle1:checked
{
    background-color: red; // <-- this is just for testing. And it never executes.
}

问题：，我在这里错过了什么？

Answer 1

假设ion-checkbox类似于checkbox/radio或option类型的简单input。

*检查了文档

选中的CSS伪类选择器表示选中或切换到on状态的任何收音机()、复选框()或选项(A)元素。

如果您浏览一下ion-checkbox组件代码，

“‘+’按钮”复选框“”+‘type=“按钮”+’离子按钮=“项目-盖”+‘id=“id’+‘att.aria-复选=”_value“+’吸引‘的标记_labelId“+‘atta.aria-disabled=”_disabled“’+‘class=’项目-盖”>‘+’，

当显示时，它是一个按钮。

您需要创建一个自定义类。

  .isChecked{
     background-color: red;
  }

并根据布尔值使用[class]动态设置它。

 <ion-checkbox [class.isChecked] = "isCurrentCheckboxChecked"></ion-checkbox>