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

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

试试看.这可能有效,但我不保证.