Appending selected checkboxes to another div

I am trying to write a function that moves any selected checkboxes from one div to another, however currently only the id of the selected checkboxes are being appending to the "Added" div. Does anyone have any ideas on how to do this?

 <fieldset>
    <h3>Pages</h3>
        <div class="fieldset_elements">
            <div id="pagecontainer">
                <div class="selectpagebox" id="pagebox1">
                    <h4>Available Pages</h4>
                        {foreach from=$pagelist item=page}
                             <div class="pageSelection"><input type="checkbox" id="{$page.id}" class="pages" value="{$page.id}">{$page.page_name}</div>
                        {/foreach}
                </div>
                <div class="selectpagebox" id="pagebox2">
                    <h4>Selected Pages</h4>
                </div>
            </div>
        </div>
    </fieldset>

$(function(ready) {
    $(".pages").change(function () {
        var pageId = $(this).attr('id');
        if(pageId.checked = true){
            $("#pagebox2").append(pageId);
        } else if(pageId.checked != true) {
            $("#pagebox1").append(pageId);
        }
    });
});