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

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

试试吧。这可能有效，但我不作任何保证。