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

【问题标题】：Appending selected checkboxes to another div将选定的复选框附加到另一个 div
【发布时间】：2018-08-06 11:27:42
【问题描述】：

我正在尝试编写一个函数，将任何选定的复选框从一个 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);
        }
    });
});

【问题讨论】：

标签： jquery html checkbox

【解决方案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

【讨论】：

感谢您的解决方案！