在选中的jQuery上移动复选框 [英] Move checkboxes on checked jQuery

问题描述

我想移动复选框，如果他们被检查。

 < div id =chkboxes> 
< input type =checkboxname =cityid =1/>一个< br /> 
< input type =checkboxname =cityid =2/>两个< br /> 
< input type =checkboxname =cityid =3/>三< br /> 
< input type =checkboxname =cityid =4/>四个< br /> 
< input type =checkboxname =cityid =5/>五< br /> 
< / div> 
  

所以如果任何复选框被选中，它应该移动到列表的顶部。如何用jquery做到这一点？

我试图构建伪代码，但无法获取逻辑。

谢谢。

解决方案

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

a href =http://jsfiddle.net/scSYV/139/ =nofollow> jsfiddle点击这里

I want to move the checkboxes if they are checked.

<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>

So if any checkbox is checked, it should move on the top of the list. How do I do that with jquery?

I am trying to build the pseudo code, but not able to get the logic.

Thanks.

解决方案

  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>

try this with jquery and working jsfiddle click here

这篇关于在选中的jQuery上移动复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！