Как при загрузке и при клике отсортировать список 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 sorted = (data, keys) => Array
  .from(data, n => [ n ].concat(keys(n)))
  .sort((a, b) => {
    let diff = 0;
    for (let i = 0; ++i < a.length && !(diff = ((a[i] < b[i]) ? -1 : +(a[i] > b[i])));) ;
    return diff;
  })
  .map(n => n[0]);

Как сортировать дочерние элементы:

const sortChildren = (el, keys) =>
  el.append(...sorted(el.children, keys));

Сортируем:

const ul = document.querySelector('ul');

ul.addEventListener('change', e => sortChildren(
  e.currentTarget,
  el => [
    -el.querySelector('input').checked,
    el.innerText.trim().toLowerCase(),
  ]
));

ul.dispatchEvent(new Event('change'));