创建一个表单，允许用户在页面上选择图像

Question

附件是我试图编码的部分页面的屏幕截图。我希望用户能够点击图像并记录该选择，然后发送给我，这样我就知道他们最喜欢哪种设计。

我不希望用户输入任何内容，只需单击图像并发送表单即可。我将使用jQuery在“您选择...”部分中显示用户选择，但我完全不确定如何将他们的选择记录在表单中，以便我可以在他们按下提交后通过电子邮件发送结果按钮。

我有很多这些部分和图片供用户选择。我知道我可以简单地在每个图像下方放置一个单选按钮，但有一种方法可以在没有单选按钮的情况下进行操作，只需单击图像本身就可以记录它们的选择吗？也许是单选按钮和图像的组合？

感谢。

Answer 1

像这样：

<img class="bamBoum" src="blabvla.jpg" alt="" title="" data-id="1" />

var prefImage = 0;
$('.bamBoum').click(function(e){
    e.preventDefault();
    prefImage = $(this).attr('data-id');

    alert(prefImage)
});

当您“提交”页面时，只需查看变量。

当然，您必须记住您的网页需要使用Javascript才能运行。您也可以使用变量填充隐藏字段，这样当您提交表单时，您可以在另一侧看到结果。

Answer 2

有很多方法。你可以像你提到的那样使用无线电，但只是隐藏它们。只需记住设置隐藏的可见性，或绝对定位屏幕;使用display: none实际上不会使用表单提交其值，从而无法实现目的。

或者，您可以使用隐藏的输入，并将选定的选项存储在其中。

或者，如果您不介意在选择后立即提交表单，您甚至可以使用<input type="image">，为每个表单提供相同的名称，但只能使用唯一值。这可能不是解决问题的最佳方式，但从技术上讲，这是一种方式。

Answer 3

您可以在提交表单之前使用选择的值填充隐藏字段。

Answer 4

根据您需要支持的浏览器，这可能是使用ol' checkbox hack的好地方。而不是复选框，你可以使用无线电。

Answer 5

如果您使用$.post()，则可以使用变量而非输入字段构建帖子数据。

要查找选择哪一个，您可以通过查找哪个具有相应的选定类来执行此操作，或者在.data()事件期间使用click()存储选定的最后一个类