Как при загрузке и при клике отсортировать список checkbox (вначале отмеченные по алфавиту и потом остальные)?

Есть список из чекбоксов
<ul>
<li>
<input type="checkbox" id="a1" name="a[]" value="a1">
<label for="a1">Alex</label>
</li>
<li>
<input type="checkbox" id="a2" name="a[]" value="a2">
<label for="a2">Mike</label>
</li>
<li>
<input type="checkbox" id="a3" name="a[]" value="a3">
<label for="a3">Bob</label>
</li>
<li>
<input type="checkbox" id="a4" name="a[]" value="a4">
<label for="a4">Anton</label>
</li>
</ul>

Нужно что бы при загрузке кода список был отсортирован по значению в label в алфавитном порядке
А при выделении одного или нескольких элементов, что бы эти чекбоксы перемещались вверх (так же сортировались в алфавитном порядке) и вначале бы шли выделенные записи в алфавитном порядке, а потом не выделенные записи в алфавитном порядке
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
const ul = document.querySelector('ul');

ul.addEventListener('change', function() {
  this.append(...Array
    .from(this.children, n => [ n, n.innerText.trim(), n.querySelector('input').checked ])
    .sort((a, b) => (b[2] - a[2]) || a[1].localeCompare(b[1]))
    .map(n => n[0])
  );
});

ul.dispatchEvent(new Event('change'));
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы