Mover casillas de verificación en jQuery marcada

Quiero mover las casillas de verificación si están marcadas.

One
Two
Three
Four
Five

Entonces, si alguna casilla está marcada, debería moverse en la parte superior de la lista. ¿Cómo hago eso con jquery?

Estoy tratando de construir el pseudo código, pero no puedo obtener la lógica.

Gracias.

  var list = $("ul"), origOrder = list.children(); list.on("click", ":checkbox", function() { var i, checked = document.createDocumentFragment(), unchecked = document.createDocumentFragment(); for (i = 0; i < origOrder.length; i++) { if (origOrder[i].getElementsByTagName("input")[0].checked) { checked.appendChild(origOrder[i]); } else { unchecked.appendChild(origOrder[i]); } } list.append(checked).append(unchecked); }); 
  

Puede utilizar la función de JavaScript de esta manera

 $('table').on('change', '[type=checkbox]', function () { var $this = $(this); var row = $this.closest('tr'); if ( $this.prop('checked') ){ // move to top row.insertBefore( row.parent().find('tr:first-child') ) .find('label').html('move to bottom'); } else { // move to bottom row.insertAfter( row.parent().find('tr:last-child') ) .find('label').html('move to top'); } }); 

Manifestación

Utilice el controlador onChange y, si la casilla está marcada, clone la casilla y remove . Ahora agregue el elemento de clonación a la lista de casillas de verificación usando .prepend()

 $(function(){ var checkedbox; $('input[type="checkbox"]').on('change', function(){ if($(this).prop('checked', 'checked')){ checkedbox = $(this).parent().clone(); } $(this).parent().remove(); $('#chkboxes').prepend(checkedbox); }) }) 
  
One
Two
Three
Four
Five