使用jQuery将选中的复选框从一个列表移动到另一个列表
使用jQuery将选中的复选框从一个列表移动到另一个列表
提问于 2013-03-28 21:38:04
单击链接时，我正在尝试在列表之间移动选中的项目：
$('#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>目前，如果我点击添加或删除链接，它只会移动整个列表中的一个。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-28 21:44:01
您的选择器不正确。:checked选择器查找被选中的输入元素(复选框或单选按钮)，但是您试图查找被选中的<li>元素(这是不可能发生的事情)。
相反，您需要做的是找到<li>元素中的:checked元素，然后获取对其包含的<li>元素的引用，然后移动它们。执行此操作的代码将如下所示：
$('#add').click(function() {
return !$('#select1 li :checked').closest('li').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 li :checked').closest('li').appendTo('#select1');
});如果你想看看this working example。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15683362
复制相关文章
相似问题
腾讯云开发者
