Неопределенные флажки с Alpine.js
Я пытаюсь реализовать неопределенные флажки с помощью Alpine.js.
Вы можете поставить все галочки, но когда вы пытаетесь снять какую-то галочку, там все галочки сняты.
Взгляните: https://codepen.io/nuno360/pen/gOwXpXP
<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.info(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>
Спасибо за помощь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Причина невозможности отменить выбор одной опции заключается в том, что all в строке ниже дает ref, который является элементом dom для функции watch.
<input id = "all" x-ref = "all" @change = "allChecked = $event.target.checked ? all : []; console.info(allChecked)" type = "checkbox" class = "...">
Нам нужно установить массив allChecked в ['1','2'], если установлен флажок all. Итак, чтобы решить эту проблему,
<input id = "all" x-ref = "all" @change = "allChecked = $event.target.checked ? ['1','2'] : []; console.info(allChecked)" type = "checkbox" class = "...">
Обновлять
Чтобы автоматически передавать значения, мы можем использовать функцию, которая собирает все значения флажка в массив, как показано ниже.
<table x-data = "{ allChecked: [], getValues(){
var array = []
var checkboxes = document.querySelectorAll('input[x-model=allChecked]')
for (var i = 0; i < checkboxes.length; i++) {
array.push(checkboxes[i].value)
}
return array;
} }" x-init = "..." >
И используйте функцию getValues вместо жесткого кодирования, как показано ниже.
<input id = "all" x-ref = "all" @change = "allChecked = $event.target.checked ? getValues() : []; console.info(allChecked)" type = "checkbox" class = "...">
да, вы можете использовать его в качестве реквизита данных, где указаны все значения флажков. или установите флажки с помощью data-prop или класса и соберите значения в массив.
@NAG Пожалуйста, ознакомьтесь с обновлением ответа, чтобы автоматически получать значения флажков.
Идеальный. Спасибо!
Можете ли вы помочь мне установить соответствующий флажок как неопределенный, когда проверяются некоторые дети? Пожалуйста, проверьте: codepen.io/nuno360/pen/YzpLyqw Спасибо!
Я думаю, что демо, которое у вас есть, работает нормально. Что с этим не так?. Можете ли вы объяснить сценарий, когда он терпит неудачу?
Если вы нажмете на Аргентину, на правой кнопке «23 региона», вы увидите, что у вас отмечены 2 варианта, но флажок Аргентины не является неопределенным.
Спасибо. Могу ли я сделать это динамически? Без передачи предметов вручную?