una tabla datos con agregar jquery html checkbox

tabla - Mueva casillas de verificación en jQuery marcado



agregar datos a una tabla html (3)

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

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.


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>


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í