使用按钮作为字段输入而不是下拉菜单/单选按钮/复选框。

Question

在我的表单上，我有一个包含7个可能值的字段。我想在按钮上显示数据，而不是使用下拉菜单或复选框，类似于Quirky.com的申请表 - 特别是“选择类别”字段（https://www.quirky.com/ideas/new） 。

这是一个jquery插件吗？

屏幕截图：http://i.stack.imgur.com/qwVEX.png

Answer 1

据我所知，没有针对此特定功能的特定插件，但是使用jQuery非常容易。只需创建一个字段（文本字段就可以了）来保存您想要提交的值，然后创建7个按钮。创建一个简单的javascript函数，根据单击的按钮设置文本字段的值。中提琴！

该功能可能如下所示：

<script type="text/javascript">
function setValue(button){
$('#idOfTextBox').val(button.attr('name'));

$('.classOfButton').removeClass('selected');
button.addClass('selected');

return false;
}
<script>

编辑：脚本更改 你会注意到我从按钮添加和删除类，它是同伴按钮。这样您就可以设置选择哪一个。另外，我使用按钮的“name”属性作为文本框中的值。

Answer 2

使用标准HTML表单标记，然后将其转换为按钮。这更好，因为如果禁用JavaScript，用户仍然可以使用该表单。这是'优雅退化'。

如果选项互斥，请使用单选按钮。如果没有，请使用复选框。

可以在http://msdn.microsoft.com/en-us/scriptjunkie/ff756526和http://theodin.co.uk/blog/design/fancy-radio-buttons-jquery.html找到此类技术的代码。