Livewire单选按钮显示异常：点击后闪烁且全部呈未选中状态

针对你遇到的单选按钮点击后闪烁、最终显示未选中，但模型值正常的问题，可尝试以下几种解决方案：

• 排查自定义样式干扰
  首先移除custom-radio类，测试原生单选按钮是否正常工作。如果原生状态下显示正常，说明问题出在自定义CSS上：

  • 若你是通过隐藏原生input、用伪元素模拟单选按钮样式，需确保伪元素的状态与input的:checked状态正确绑定，调整CSS选择器保证选中状态样式能正确触发。
  • 可直接使用accent-color属性自定义单选按钮的选中颜色，避免复杂伪元素逻辑带来的冲突。

• 添加唯一标识与关联
  给每个radio按钮设置唯一id，并让对应label的for属性关联该id，确保DOM元素标识清晰，Livewire更新时能正确匹配：

  <div class="mt-4">
      <label for="package-x" class="block mb-6">
          <input type="radio" id="package-x" name="package" class="custom-radio mr-2" wire:model="package" value="x" />
          x
      </label>      
      <label for="package-y" class="block mb-6">
          <input type="radio" id="package-y" name="package" class="custom-radio mr-2" wire:model="package" value="y" />
          y
      </label>      
      <label for="package-z" class="block mb-6">
          <input type="radio" id="package-z" name="package" class="custom-radio mr-2" wire:model="package" value="z" />
          z
      </label>      
  </div>
  

• 添加wire:key确保DOM更新准确
  给每个radio按钮添加唯一的wire:key，避免Livewire在DOM diff时复用错误元素：

  <div class="mt-4">
      <label class="block mb-6">
          <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" wire:key="radio-package-x" value="x" />
          x
      </label>      
      <label class="block mb-6">
          <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" wire:key="radio-package-y" value="y" />
          y
      </label>      
      <label class="block mb-6">
          <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" wire:key="radio-package-z" value="z" />
          z
      </label>      
  </div>
  

• 更新Livewire版本
  若你使用的是旧版Livewire，可能存在DOM更新的bug，升级到最新稳定版本即可修复这类兼容性问题。

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