时间戳

首页 > 解决方案 > 单击复选框后突出显示标签项

html - 单击复选框后突出显示标签项

问题描述

我试图将卡片显示为输入类型是一个复选框，在选择卡片时，我能够获取用户选择的卡片的详细信息，我的要求是我需要突出显示用户选择的卡片。

例如，我需要突出显示选中复选框的卡片，如果未选中复选框，我需要显示为卡片。

lable+input[type=checkbox]:checked {
  //some css code
}
<form [fromGropu]="form1">

  <label for="{{i}}" *ngFor="let item of items" ;let i=index ">
    <input type="checkbox " id="{{i}} " [value]="item " (change)="onchange() "/>
    
    <div class="card rounded-0 ">
    <div class="card-header ">{{item.header}}</div>
    <diva class="card-body>{{item.desc}}</div>
    <div class="card-footer">{{item.footer}}</div>
    </div>
    </div>
    </label
    </form>

但是上面的CSS不起作用，有人可以帮忙吗

标签： htmlcssangularcheckboxangular-reactive-forms

解决方案

为什么不只突出显示使用切换的类ngClass？请尝试此更改。

<form>
    <label for="{{i}}" *ngFor="let item of items;let i =index" (click)="item.active = !item.active;"
  [ngClass]="item.active ? 'active' : ''" style="display:block;">
    <div class="card rounded-0">
      <div class="card-header">{{item.header}}</div>
      <div class="card-body">{{item.desc}}</div>
      <div class="card-footer">{{item.footer}}</div>
    </div>
  </label>
</form>

注意：active如果您将数据发送到任何 API，请删除使用的数组的此属性。下面是一个工作示例！

Stack Blitz Demo

推荐阅读