我设置了这个脚本，将数据库中的所有相关用户回显到旁边带有复选框的页面。您可以通过选中某些框并提交表单，将数据库中的这些用户组成一个组。这一切都很好。
很遗憾，我们的设计师不喜欢这样。她想要的基本上是屏幕左侧的六个空白字段的列表。然后，当您单击屏幕右侧某个人名旁边的加号按钮时，该名称会出现在第一个空白字段中……以此类推，随后单击每个加号按钮。
因此，与其重新编码所有这些(这真的不是一个选项)，我想我可以用 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 中的建议。并在未选中时删除该值。
最佳答案
如果我理解正确，您需要使用 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/
关于php - 使用 jQuery 重新设计表单样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11105833/