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

Question

[Алексей]

Есть список из чекбоксов

<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 в алфавитном порядке
А при выделении одного или нескольких элементов, что бы эти чекбоксы перемещались вверх (так же сортировались в алфавитном порядке) и вначале бы шли выделенные записи в алфавитном порядке, а потом не выделенные записи в алфавитном порядке

Comments

[Nik Faraday]

Хорошо, что именно вам не понятно?

[Алексей]

Nik Faraday, два вопроса
как при загрузке страницы из этого html кода отсортировать по значению лабел такой вложенный код
и как отсортировать, что бы вначале сортировались выделенные и потом не выделенные и оба блока в алфавитном порядке?

[Nik Faraday]

1) Дать каждому элементу li свой Id
2) Дать каждом элементу label свой Id
3) Вытянуть каждый элемент label в массив
4) Разбить этот массив на два массива, в первый должны уйти все элементы где is(":checked"), во второй, если нет
5) Отсортировать первый массив по алфавиту
6) Отсортировать второй массив по алфавиту
7) Поочереди выводить в элементы li значения из первого массива, а потом из второго

Answer 1

[0xD34F]

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'));