jquery - 使用 jQuery 将选中的复选框从一个列表移动到另一个列表

Question

单击链接时，我试图在列表之间移动选中的项目：

$('#add').click(function() {
    return !$('#select1 li:checked').appendTo('#select2');
});
$('#remove').click(function() {
    return !$('#select2 li:checked').appendTo('#select1');
});


<ul id="select1">
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />Checkbox 1</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />Checkbox 2</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />Checkbox 3</label>
    </li>
</ul>

<ul id="select2">
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_0" />Checkbox 4</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_1" />Checkbox 5</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_2" />Checkbox 6</label>
    </li>
</ul>

<a href="#" id="add">add</a>
<a href="#" id="remove">remove</a>

目前，如果我点击添加或删除链接，它只会移动整个列表之一。

Answer 1

您的选择器不正确。选择器查找被选中的:checked输入元素（例如复选框或单选按钮），但您试图找到<li>被选中的元素（不可能发生的事情）。

相反，您需要做的是找到:checked元素内部的<li>元素，然后获取对其包含<li>元素的引用，然后移动它们。执行此操作的代码如下所示：

$('#add').click(function() {
    return !$('#select1 li :checked').closest('li').appendTo('#select2');
});
$('#remove').click(function() {
    return !$('#select2 li :checked').closest('li').appendTo('#select1');
});

如果你想看看这个工作示例。