如何使用jquery重新排序表单字段

How to reorder form fields using jquery

本文关键字：排序 表单 字段 何使用 jquery 新排序      更新时间：2023-09-26

我有一个PHP页面，它的表单是这样的:

<form class="form3">
<label class="form3"><input type="checkbox"> Item-1</label>
<label class="form3"><input type="checkbox"> Item-2</label>
<label class="form3"><input type="checkbox"> Item-3</label>
<label class="form3"><input type="checkbox"> Item-4</label>
<label class="form3"><input type="checkbox"> Item-5</label>
</form>

我有这样的javascript变量设置:

var checked = ["", "yes", "", "yes", ""];

现在，当页面加载时，我想检查检查值是否为"yes"，然后我想把这些输入项放在列表的前面，剩下的放在后面，像这样:

<form class="form3">
<label class="form3"><input type="checkbox" checked="checked"> Item-2</label>
<label class="form3"><input type="checkbox" checked="checked"> Item-4</label>
<label class="form3"><input type="checkbox"> Item-1</label>
<label class="form3"><input type="checkbox"> Item-3</label>
<label class="form3"><input type="checkbox"> Item-5</label>
</form>

我认为，jQuery将是这样做的方式。这意味着，我将需要循环通过表单字段(我不确定如何)，并在循环内检查相应的变量是否为空白或"是"，如果是，打印该表单字段。然后再次执行相同的循环并打印对应变量为空白的所有字段。

希望逻辑正确。

我可以像这样循环遍历表单元素:

$.each($('.form3'),function(i,e){
    if(checked[i] == "")
        {
            e.appendTo($('.form3'));
        }
});

但很明显，appendTo行给了我错误:

Uncaught TypeError: Object #<HTMLLabelElement> has no method 'appendTo'

那么，现在我需要知道如何选择每一行并在循环时重新排序。

谢谢

试试这个:

$('.form3').each(function(i,e) {
    if(checked[i] == "") {
        $(this).find('input[type=checkbox]').attr('checked', true);
        $(this).appendTo($('form'));
    }
});

你想的方向是对的我是这样处理的:

$('.form3').each(function(){
    var lbl = $(this);
    var chk = lbl.find('input[type=checkbox]');
    if(chk.attr('checked'))
    {
        lbl.prependTo($('#myForm'));
    }
});

你可以在这里找到一个工作的例子:http://jsfiddle.net/saelfaer/LbMQG/1/

相关文章：