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

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

我的要求是:

单击选择图像，然后将选择反馈给用户，例如通过更改边框。

优雅地降级为 html，并且仍然有效。

跨浏览器/设备支持(例如需要在 ipad 上工作)

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

谢谢。

最佳答案

您可以这样做:缩略图并在其顶部或旁边放置您的复选框。然后通过 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'));
    });
});

试试看。这可能有效，但我不提供任何保证。

关于javascript - 从缩略图网格中选择多个图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5731898/