如何从列表中删除选中的复选框并将其添加到另一个列表中

How to remove the checked checkboxes from the list and add them to another list

本文关键字：列表 添加 另一个 删除 复选框      更新时间：2023-09-26

如何从列表中删除选中的复选框并将其添加到另一个列表中？

      $('#mer').click( function() {
         //var unchecked = [];
       $('input[type="checkbox"]').each (function() {
       if (this.checked) {
         var txt = $(this).next("label").text();
         $('#ch').append($('<li>').append($(this).clone()).append(txt));
         $(':checkbox:checked').attr('disabled', true);  
         $(':checkbox:checked').remove();
          //$('.checklist').hide();
         $('#ch').show();
         //$('input[type="checkbox"]:not(:checked)').show('.checklist');
       } /*else {
                unchecked.push(this);   
                var txt1 = $(this).next("label").text(); 
                $('.checklist').append($('<li/>').append($(this).clone()).append(txt1));
                 $('.checklist').show();
            }*/
       });

这很简单：

$('#from :checked').appendTo('#to');

其中#from是父级(也称为select/checkbox父级(，to是#to是您希望将其放入的其他select或父级。

我不确定你到底想做什么，但像这样的东西可能会起作用：

$('input[type="checkbox"]').each (function() {
if($(this).is('input:checkbox:checked')){
    $(this).appendTo('whereverClassOrElement').remove();
}
});

我不确定您到底需要什么，但这里有一个整洁的交换示例。如果你这样设置你的html：

<h3>List One</h3>
<ul id="listOne">
    <li><label for="a">A</label><input type="checkbox" id="a" name="listOne"/></li>
    <li><label for="b">B</label><input type="checkbox" id="b" name="listOne"/></li>
    <li><label for="c">C</label><input type="checkbox" id="c" name="listOne"/></li>
</ul>
<br/>
<h3>List Two</h3>
<ul id="listTwo">
    <li><label for="d">D</label><input type="checkbox" id="d" name="listTwo" checked/></li>
</ul>

然后你可以像这样写相对简单的jQuery：

$(document).ready(function(){
    $('input[type=checkbox]').live('click', function(event){
        var t = $(this);
        var from = 'listOne';
        var to = 'listTwo';
        if (!t.is(':checked')){
            var swap = to;
            to = from;
            from = swap;
        }
        $('#'+to).append(t.attr('name', to).parent());
    });
});

我有一个jsfiddle工作：http://jsfiddle.net/FgWhr/5/

相关文章：