本文介绍了在选中的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上移动复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!