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

时间:2011-10-05 08:21:17

标签: javascript jquery

我有一个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", ""];

现在加载页面时,我想检查选中的值是否为“是”,然后我想将这些输入项放在列表中,其余的放在后面,如下所示:

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

BUT 显然,appendTo行给了我错误:

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

所以,现在我需要知道如何选择每一行并在循环时重新排序。

由于

2 个答案:

答案 0 :(得分:4)

请改为尝试:

$('.form3').each(function(i,e) {

    if(checked[i] == "") {

        $(this).find('input[type=checkbox]').attr('checked', true);
        $(this).appendTo($('form'));

    }

});

答案 1 :(得分:0)

你正在思考正确的方向 这是我将如何照顾这个:

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