使用jQuery重新设计表单？

我设置了这个脚本，可以将数据库中的所有相关用户回复到旁边带有复选框的页面。您可以通过选中某些框并提交表单，从数据库中的这些用户中创建一个组。这一切都很好。使用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中。并在未选中时删除该值。

来源

2012-06-19 AzzyDude

有无数的插件修改复选框成风格的元素......让谷歌是你的朋友 – charlietfl

这不是多数民众赞成困扰我的一部分。 Google已经在这方面为我提供了帮助。真正的问题是JS代码在复选框被选中时将用户名添加到字段中？ – AzzyDude

标记在哪里？ – charlietfl

如果我理解正确的话，你需要使用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/

来源

2012-06-19 17:32:54

是的，我打算使用CSS3。不过，我知道你不能用CSS单独设计复选框或单选按钮，你需要以某种方式使用jQeury。感谢所有的信息！ – AzzyDude

使用jQuery重新设计表单？

回答

相关问题