tabla - Mueva casillas de verificación en jQuery marcado

agregar datos a una tabla html

Question

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

<div id="chkboxes">
<input type="checkbox" name="city" id="1"/> One <br />
<input type="checkbox" name="city" id="2"/> Two <br />
<input type="checkbox" name="city" id="3"/> Three   <br />
<input type="checkbox" name="city" id="4"/> Four    <br />
<input type="checkbox" name="city" id="5"/> Five    <br />
</div>

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

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

Gracias.

Answer 1

Puede usar la función JavaScript como esta

$(''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

Answer 2

Use el controlador onChange y si la casilla de verificación está marcada, clone la casilla de verificación y remove . Ahora anteponga el elemento clon 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);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chkboxes">
<div><input type="checkbox" name="city" id="1"/> One <br /></div>
<div><input type="checkbox" name="city" id="2"/> Two <br /></div>
<div><input type="checkbox" name="city" id="3"/> Three   <br /></div>
<div><input type="checkbox" name="city" id="4"/> Four    <br /></div>
<div><input type="checkbox" name="city" id="5"/> Five    <br /></div>
</div>

Answer 3

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul>
<li><label><input type="checkbox" id="one" />One</label></li>
<li><label><input type="checkbox" id="two" />Two</label></li>
<li><label><input type="checkbox" id="three" />Three</label></li>
<li><label><input type="checkbox" id="four" />Four</label></li>
<li><label><input type="checkbox" id="five" />Five</label></li>
</ul>

intente esto con jquery y jsfiddle de trabajo haga clic aquí