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

Question

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

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

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 不起作用，谁能帮忙解决这个问题

Answer 1

输入检查后，输入后的div.card应该应用css。

你的css应该是这样的

input[type=checkbox]:checked + div.card{
color: red;
}

演示https://stackblitz.com/edit/angular-checked-input?file=src/app/app.component.css

Answer 2

---

为什么不只突出显示使用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>

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

Stack Blitz Demo

Answer 3

.services input[type="checkbox"] {
  display: none;
}

.services label {
  height: 100%;
  padding: 10px;
  margin: 0px;
  border-radius: 0.55rem;
}

.services input[type="checkbox"]:checked + label {
  background: #20df80;
}

.services input[type="checkbox"]:checked + label::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  border: 2px solid #1dc973;
  content: "\f00c";
  font-size: 24px;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background: white;
}

.services img{
  max-width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container mt-5'>
  <div class="row services">
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="24 Horas" name="type[]" value="5" checked>
        <label for="24 Horas">
          <br>
          <h5 class="card-title"><strong>24 Horas</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="Aire acondicionado" name="type[]" value="4">
        <label for="Aire acondicionado">
          <br>
          <h5 class="card-title"><strong>Aire acondicionado</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="Bar" name="type[]" value="8">
        <label for="Bar">
          <br>
          <h5 class="card-title"><strong>Bar</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="Buffet" name="type[]" value="3" checked>
        <label for="Buffet">
          <br>
          <h5 class="card-title"><strong>Buffet</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
  </div>
</div>