用 jQuery 重新设置表单的样式？

Question

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

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

因此，与其重新编码所有这些（这真的不是一个选项），我想我可以用 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 的建议。并在未选中时删除该值。

Answer 1

如果我理解正确的话，你需要用 JQuery 做以下事情：

1) 将服务器端代码生成的复选框 () 替换为可点击的 +/- 符号。

您可以通过找到复选框并将其默认阶段替换为背景图像为 + 的空链接来执行此操作。

$('checkbox').remove().html('<a href="#" style="background-image:plusSign.png">Some Name</a>');

如果你知道怎么做，你应该创建加号和减号背景图像 CSS 类，而不是内联样式。

2）您希望在单击时将 + 更改为 -，并且 3）让 + 号旁边的用户名出现在其他位置（在空输入框中？）

要切换背景图像，只需在单击时更改样式（或类，如果您知道如何使图像成为 CSS 类）。然后获取内容并将其放入您的目标元素中。

这个 jsFiddle 可能有助于说明我上面描述的内容：http://jsfiddle.net/Ap2yW/1/