如何在Livewire中实现勾选单个checkbox时自动取消其他勾选状态

实现方案 #

方案1：使用radio单选框实现（推荐） #

单选场景本身符合radio的HTML语义，原生支持同name互斥，不需要额外编写逻辑，改动量最小：

• 修改Livewire组件属性，将原本用于多选的数组替换为单个变量存储选中ID：

// 原代码 public $addressSelected = []; 替换为
public $selectedAddressId = null;

• 修改Blade模板中的input标签：

<input wire:model="selectedAddressId"
       value="{{$address->id}}"
       class="form-check-input" 
       type="radio"
       name="address_select"
       id="check{{$address->id}}">

同name属性的radio原生就会互斥，Livewire会自动同步选中的ID到$selectedAddressId变量，后续业务逻辑直接读取该变量即可。如果需要checkbox的视觉样式，自行覆盖radio的CSS样式即可。

方案2：保留checkbox实现互斥 #

如果一定要保留checkbox的交互特性，可通过Livewire的更新钩子实现逻辑互斥，不需要修改现有模板代码，只需在Livewire组件中添加如下钩子方法：

public function updatedAddressSelected($value, $changedKey)
{
    // 遍历所有选中状态，仅保留当前触发更新的项的选中状态，其余全部设为未选中
    foreach ($this->addressSelected as $addressId => $checked) {
        if ((string)$addressId !== (string)$changedKey) {
            $this->addressSelected[$addressId] = false;
        }
    }
}

该方法会在addressSelected数组的任意值更新时触发，自动清空其他项的选中状态，实现单选互斥效果。

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