Question

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

我的要求是：

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

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

感谢。

Answer 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'));
    });
});

尝试一下。这可能有用，但我不保证。

Answer 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('');
});

Answer 3

如果你想要改变所选缩略图的边框颜色这样的花哨东西，你需要使用javascript来完成它。特别是如果您需要跨浏览器支持。

关于javascript关闭的时候，我认为，这是你在第二点的意思，我只是使用缩略图的复选框，让用户选择他/她需要的东西。

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

3 个答案: