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/

用jQuery重新设计表单样式？

1 个答案: