Jquery 复制选中的复选框

Question

我有一个使用表单和复选框显示结果的搜索页面。当页面重新加载新结果时，我想在页面顶部显示类似这样的内容，以便用户可以轻松删除他们的选择之一：

X 蓝色 X 红色 X 黑色

我的复选框如下所示：

<input type="checkbox" name="color[]" id="color_white" value="white">White
<input type="checkbox" name="color[]" id="color_blue" value="blue" checked="checked">Blue
<input type="checkbox" name="color[]" id="color_red" value="red" checked="checked">Red
<input type="checkbox" name="color[]" id="color_orange" value="orange">Orange
<input type="checkbox" name="color[]" id="color_purple" value="purple">Purple
<input type="checkbox" name="color[]" id="color_black" value="black" checked="checked">Black

如何获取选中的复选框，然后将它们复制到页面顶部，以便用户只需单击 X 即可 "uncheck?"

点击事件和表单提交在 jquery 中完成，所以我假设这也可以通过这种方式完成。谁能帮忙？谢谢！

Answer 1

我建议在顶部添加一个空白 div

<div id="checked"></div>

然后在加载时为每个选中的输入创建一个按钮

$(function(){
    $('input[type=checkbox]').each(function(){
        if($(this).attr('checked')=='checked'){
            $('#checked').append('<input id="'+$(this).attr('id').substring(6)+'" type="button" value="'+$(this).attr('id')+'">')
        }
    }); 
    $('input').on('click',function(){
        var i='color_'+$(this).attr('id');
        $('#'+i).prop('checked','');
        $(this).remove();
    });
});

如果单击按钮，则取消选中并自行删除。

Jquery 复制选中的复选框

Jquery duplicate selected checkbox

javascript

forms

checkbox

jquery