使用 jQuery 重新设置表单样式

我设置了这个脚本，将数据库中的所有相关用户回显到旁边带有复选框的页面。您可以通过选中某些框并提交表单来将数据库中的这些用户组成一个组。这一切都很好用。

不幸的是，我们的设计师不喜欢这样。她想要的基本上是屏幕左侧六个空白字段的列表。然后，当您单击屏幕右侧人名旁边的加号按钮时，该姓名会出现在第一个空白字段中......以此类推，单击的每个后续加号按钮。

因此，与其重新编码所有这些（这真的不是一种选择），我想我可以用jQuery"重新设置"所有这些。我可以设置复选框的样式，使它们在未选中时看起来像加号，在选中时看起来像减号。

然后，我只需要有某种事件，以便在单击复选框时，将取用此人的姓名并将其插入到第一个空框中。这一切都只是烟雾和镜子。空框可能只是一个带有边框的div。从功能上讲，它的工作方式将与以前相同。

谁能确认这是否可行？我的JS知识很糟糕，我不知道从哪里开始。另外，我已经在页面上有以下jQuery验证器功能，我不希望这个新的JS干扰它：

$(document).ready(function(){
$("#myform").validate({
    debug: false,
    rules: {
        group: {required: true}, 
    },
    messages: {
        group: {required: " Field required.", loginRegex: " Invalid character."},
    },
    submitHandler: function(form) {
        $('input[type=submit]').attr('disabled', 'disabled');
        $('#results').html('Loading...');
        $.post('process_group.php', $("#myform").serialize(), function(data) {
            $('#results').html(data);
        });
    }
    });
});

我想我所要求的是有关如何编写复选框以在选中时将其值插入某个div 的建议。并在未选中该值时将其删除。