iPhone设备Checkbox伪类切换后仍显示选中状态的问题求助

针对你遇到的iPhone所有浏览器中，Checkbox关联Label的筛选按钮取消勾选后视觉仍保持选中状态的问题，以下是几个针对性的解决方案：

1. 移除ng-checked，避免双向绑定冲突 #

AngularJS中ng-model和ng-checked同时作用于同一表单元素时，容易出现原生DOM状态与AngularJS模型状态不同步的情况，这在WebKit内核的iOS浏览器中表现尤为明显。直接移除ng-checked属性，仅保留ng-model来控制选中状态：

修改后的视图代码片段：

<div ng-repeat="(key2, data) in customFilter.result" 
     ng-if="customFilter.filterType == 'checkbox'">
  <input
      ng-disabled="!data.isValid"
      ng-model="userFilters[key][data.id]"
      type="checkbox"
      id="filter[[ data.id ]][[ data.value ]]"
      name="customFilter.title"
      ng-true-value="true"
      ng-false-value="false"
      class="btn-check filter-data"
      ng-init="userFilters[key][data.id] = data.checked"
      ng-change="setFilters()"
      autocomplete="off"
                        >
  <label class="btn btn-outline-grey btn-sm rounded-pill"
      ng-class="{'custom-disabled': !data.isValid}"
      for="filter[[ data.id ]][[ data.value ]]">
      [[ data.display ? data.display : data.value ]]
  </label>
</div>

2. 在状态更新后强制触发重绘 #

iOS WebKit有时不会自动重绘元素状态，可在setFilters()函数末尾添加强制重绘的逻辑，触发浏览器重排重绘：

function setFilters() {
  // 原有的筛选逻辑代码...
  
  // 强制触发重绘
  const filterLabels = document.querySelectorAll('.btn-outline-grey');
  filterLabels.forEach(label => {
    // 通过读取offsetHeight强制触发重排
    void label.offsetHeight;
  });
}

3. 优化CSS避免:active状态残留 #

当前CSS中:active状态和:checked状态样式一致，iOS触摸后:active状态可能不会及时清除，可调整CSS优先级或拆分状态样式：

.btn-check:checked + .btn-outline-grey {
    background-color: $secondary;
    border-color: $secondary !important;
    color: white;
}
/* 调整:active状态，仅在触摸过程中生效，避免残留 */
.btn-check:active + .btn-outline-grey:not(:checked) {
    background-color: lighten($secondary, 20%);
    border-color: lighten($secondary, 20%);
}

4. 禁用iOS触摸高亮效果 #

添加CSS禁用iOS默认的触摸高亮，避免视觉干扰：

.btn-outline-grey {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

优先尝试方案1，因为ng-model和ng-checked的冲突是最可能的根源，若仍有问题再结合方案2和3调整。

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