从缩略图网格中选择多个图像答案

【问题标题】：Select multiple images from a grid of thumbnail images从缩略图网格中选择多个图像
【发布时间】：2011-07-26 11:21:53
【问题描述】：

我在表单上有缩略图网格，我希望用户能够选择多个图像，并将他们的选择与表单一起提交。

我的要求是：

单击选择图像，并将选择反馈给用户，例如通过更改边框。
优雅地降级为 html，仍然可以工作。
跨浏览器/设备支持（例如需要在 ipad 上工作）

我的所有要求都能满足吗？

谢谢。

【问题讨论】：

Degrade gracefully to just html, and still work. 是什么意思？？
可能不是您想要的，但这个 tute 可能有用：blogs.sitepoint.com/controlling-lists-with-jquery
@ITroubs - 我期待一个 javascript 解决方案，但想明确一点，该解决方案不能依赖 javascript 来运行。我接受仅用 HTML 更改边框是不可能的。
如果你真的希望它在没有 javascript 并且只有纯 HTML 的情况下工作，那么你必须在图像的旁边或顶部使用复选框（取决于你的 css 样式），以便用户可以检查这些。
您可以这样做：缩略图并在其顶部或右侧放置您的复选框。然后通过 jquery 隐藏复选框并将单击事件附加到选中和取消选中复选框的缩略图。因此，您支持支持 jquery 而根本不支持任何 javascript 的浏览器。如果浏览器不支持 js，则不会隐藏复选框，并且复选框可以照常使用。如果浏览器这样做了，那么它们将被隐藏，而将使用花哨的 js 操作。

标签： javascript jquery html image forms

【解决方案1】：

您可以这样做：在缩略图顶部或旁边放置您的复选框。然后通过 jquery 隐藏复选框并将单击事件附加到选中和取消选中复选框的缩略图。因此，您支持支持 jquery 而根本不支持任何 javascript 的浏览器。如果浏览器不支持 js，那么复选框将不会被隐藏，并且复选框可以照常使用。如果浏览器这样做了，那么它们将被隐藏，而将使用花哨的 js 操作。

例如：

<div id="container1" class="container">
    <img>
    <input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
</div>
<div id="container2" class="container">
    <img>
    <input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
</div>

$(document).lad(function(){
    $(".container .cbox").hide();
    $(".container img").click(function(){
        //do the stuff you need to do like
       var $checkbox = $(this).parent().find(".cbox");
       $checkbox.attr('checked', !$checkbox.attr('checked'));
    });
});

试试看。这可能有效，但我不保证。

【讨论】：

【解决方案2】：

对于javascript方法fiddle：

标记：

<div>
    <img data-id="1" src="" />
    <input type="hidden" name="images[ ]" />
</div>

脚本：

$('img').live('click', function(){
    var $this = $(this);
    $this.toggleClass('selected');

    if($this.hasClass('selected'))
        $this.next(':hidden').val($this.data('id'))
    else
        $this.next(':hidden').val('');
});

【讨论】：

如果使用这种方法，您不需要为每个图像输入一个输入，只需一个就足够了。
感谢 Josiah，但如果他们关闭了 JS，那就不好了。也许它可以适应使用复选框而不是输入。
btw live() 与 delegate() 相比非常非常糟糕！在这里阅读：jquerybyexample.blogspot.com/2010/08/…

【解决方案3】：

如果您想要更改所选缩略图的边框颜色等花哨的东西，您将需要 javascript 来执行此操作。特别是如果您需要跨浏览器支持。

至于 javascript 何时关闭，我假设这是您在第二点中的意思，我只是使用缩略图的复选框，让用户选择他/她需要的内容。

【讨论】：