Javascript 带有Alpine.js的不确定复选框

我试图用Alpine.js实现不确定的复选框

您可以选择所有复选框，但当您尝试取消选中某些复选框时，所有复选框都将取消选中

看一看:

名称
编辑
区域范例技术员
内部范式

---

感谢您的帮助。

无法取消选择单个选项的原因是，下一行中的

all

给出了ref，它是

watch

函数的dom元素

如果选中了

all

复选框，则需要将

allChecked

数组设置为

['1'，'2']

，以解决此问题

更新

为了自动传递这些值，我们可以使用一个函数将复选框的所有值收集到一个数组中，如下所示

并使用

getValues

函数代替如下硬编码

谢谢。我能做吗？无需手动传递项目？是的，您可以将其作为数据道具，其中包含所有复选框的值。或者使用数据道具或类将复选框作为目标，并将值收集到数组中。@NAG请查看答案上的更新，以自动获取复选框值。完美。非常感谢。当选中某些子项时，您是否可以帮助我将相关复选框设置为不确定？请检查：谢谢！

<table x-data="{ allChecked: [] }"
    x-init="
        $watch('allChecked', value => {
            if (value.length === 0) {
                $refs.all.indeterminate = false;
                $refs.all.checked = false
            } else if (value.length == all.length) {
                $refs.all.indeterminate = false;
                $refs.all.checked = true
            } else {
                $refs.all.indeterminate = true
            }
        })
    " class="bg-white min-w-full divide-y divide-gray-200">
    <thead>
        <tr>
            <th scope="col" class="h-14 leading-none" width="60"><input id="all" x-ref="all" @change="allChecked = $event.target.checked ? all : []; console.log(allChecked)" type="checkbox" class="form-checkbox border-gray-300 h-5 w-5 cursor-pointer rounded"></th>
            <th scope="col" class="h-14 text-left text-xs text-gray-800 uppercase">Name</th>
            <th scope="col" class="h-14 relative px-6"><span class="sr-only">Editar</span></th>
        </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
        <tr class="hover:bg-gray-100">
            <td class="h-14 leading-none text-center" width="60">
                <input name="delete[]" x-model="allChecked" value="1" type="checkbox" class="form-checkbox border-gray-300 h-5 w-5 cursor-pointer rounded">
            </td>
            <td class="py-4 whitespace-nowrap text-sm text-gray-500">
                Regional Paradigm Technician
            </td>
            <td class="px-5 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900">Editar</a>
            </td>
        </tr>
        <tr class="hover:bg-gray-100">
            <td class="h-14 leading-none text-center" width="60">
                <input name="delete[]" x-model="allChecked" value="2" type="checkbox" class="form-checkbox border-gray-300 h-5 w-5 cursor-pointer rounded">
            </td>
            <td class="py-4 whitespace-nowrap text-sm text-gray-500">
                Inter Paradigm
            </td>
            <td class="px-5 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900">Editar</a>
            </td>
        </tr>
    </tbody>
</table>