Angular复选框交互问题：第三次点击移除勾选并填充红色求助

1. 组件状态与逻辑处理 #

首先在组件类中添加状态变量和事件处理函数，精准控制复选框的行为：

export class AppComponent {
  // 跟踪复选框常规勾选状态
  isChecked: boolean = false;
  // 标记是否处于红色填充状态
  isRedFilled: boolean = false;
  // 记录小复选框的点击次数
  checkboxClickCount: number = 0;
  // 原按钮点击计数（用于特定移除操作）
  buttonClickCount: number = 0;

  // 特定点击操作：按钮点击移除勾选标记
  public open(event) {
    this.buttonClickCount++;
    console.log('按钮点击次数-->' + this.buttonClickCount);
    // 重置复选框状态：清空勾选和红色填充
    this.isChecked = false;
    this.isRedFilled = false;
  }

  // 小复选框点击事件处理
  onCheckboxClick(event: Event) {
    this.checkboxClickCount++;
    console.log('复选框点击次数-->' + this.checkboxClickCount);

    // 第三次点击时触发红色填充逻辑
    if (this.checkboxClickCount % 3 === 0) {
      this.isRedFilled = true;
      this.isChecked = false;
      // 阻止浏览器默认勾选行为，避免自带对勾出现
      event.preventDefault();
    } else {
      // 非第三次点击时，切换常规勾选状态并清空红色填充
      this.isRedFilled = false;
      this.isChecked = !this.isChecked;
    }
  }
}

2. 模板绑定与自定义结构 #

在组件模板中绑定状态和事件，同时使用自定义结构实现样式可控的复选框：

<!-- 用于移除勾选的特定按钮 -->
<button (click)="open($event)">点击移除复选框勾选</button>

<!-- 自定义样式的小复选框 -->
<label class="custom-checkbox">
  <input 
    type="checkbox" 
    [checked]="isChecked" 
    (click)="onCheckboxClick($event)"
    [class.red-filled]="isRedFilled"
  >
  <span class="checkmark"></span>
</label>

3. CSS样式实现视觉效果 #

添加自定义CSS，覆盖默认复选框样式，实现红色填充效果：

.custom-checkbox {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 10px;
}

.custom-checkbox input {
  opacity: 0;
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 常规勾选状态的对勾样式 */
.custom-checkbox input:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #333;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 红色填充状态的样式 */
.custom-checkbox input.red-filled ~ .checkmark {
  background-color: #ff4444;
  border-color: #cc0000;
}

关键逻辑说明 #

• 特定点击移除勾选：按钮点击时直接重置isChecked和isRedFilled状态，一键清空复选框的所有特殊状态。
• 第三次点击红色填充：通过计数判断点击次数，第三次点击时启用红色填充状态，并阻止默认勾选行为，避免浏览器自带对勾干扰视觉效果。
• 样式完全可控：使用自定义复选框结构，通过CSS类切换实现不同状态的视觉表现，摆脱原生复选框的样式限制。

内容的提问来源于stack exchange，提问作者user9502376