Question

I have a PHP page with a form like this:

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

I have javascript variables set like this:

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

Now when the page is loaded, I want to check if the the checked value is “yes” then I want to put those input items first in teh list and the remaining ones later, like this:

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

I assume, jQuery would be the way to do it.
which means, I will need to loop through the form fields (which I am not sure how) and inside the loop check if the corresponding variable is blank or ‘yes’, and if yes, print that form field. Then again go through the same loop and print all fields where corresponding variable is blank.

Hope the logic is correct.

I am able to loop through the form elements like this:

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

BUT
obviously, the appendTo line gives me error:

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

So, now I would need to know how to pick each one of the rows and reorder them while looping.

Thanks

Answer 1

Try this instead:

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

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

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

    }

});