Question

我正在尝试编写一个将所有选定复选框从一个div移动到另一个div的函数，但是目前只有选定复选框的id追加到“已添加” div。有人对如何执行此操作有任何想法吗？

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

Answer 1

您正在检索已更改的复选框的id属性。此属性不能选中或取消选中。

您可能正在寻找的元素的checked属性：

var page = $(this);
var checked = page.prop('checked');

最后，您要添加到“页面框”之一的不是复选框本身，而是复选框容器：page.parent()。

这是解决方案：

$(function(ready) {
    $(".pages").change(function () {
        var page = $(this);
        var checked = page.prop('checked');

        if(checked){
            $("#pagebox2").append(page.parent());
        } else {
            $("#pagebox1").append(page.parent());
        }
    });
});

标记也发生了一些变化（输入标签是自动关闭的）：

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

Working fiddle here

将选定的复选框附加到另一个div

1 个答案: