javascript - Select multiple images from a grid of thumbnail images - Stack Overflow

admin管理员组

文章数量:1290389

I have grid of thumbnail images on a form, and I would like for the user to be able to select multiple images, and have their selection submitted with the form.

My requirements are:

• Single click to select the image, and selection is fed back to user, e.g by changing the border.
• Degrade gracefully to just html, and still work.
• Cross browser/device support (needs to work on ipad for example)

Can all my requirements be satisfied?

thanks.

I have grid of thumbnail images on a form, and I would like for the user to be able to select multiple images, and have their selection submitted with the form.

My requirements are:

• Single click to select the image, and selection is fed back to user, e.g by changing the border.
• Degrade gracefully to just html, and still work.
• Cross browser/device support (needs to work on ipad for example)

Can all my requirements be satisfied?

thanks.

• javascript
• jquery
• html
• image
• forms

Share Improve this question Follow asked Apr 20, 2011 at 14:23 dangerousdavedangerousdave 6,41888 gold badges4949 silver badges6363 bronze badges 8

• 1 what do you mean by Degrade gracefully to just html, and still work.?? – ITroubs Commented Apr 20, 2011 at 14:30
• 1 Might not be exactly what you're looking for, but this tute might be of use: blogs.sitepoint./controlling-lists-with-jquery – isotrope Commented Apr 20, 2011 at 14:33
• @ITroubs - I was anticipating a javascript solution, but wanted to be clear that the solution can not depend on javascript in order to function. I accept that a changing border with just HTML is not possible. – dangerousdave Commented Apr 20, 2011 at 15:07
• if you realy want it to work without javascript and only plain HTML then you wil have to use checkboxes right next or on top (depends on your css styling) of your images so the user can check these. – ITroubs Commented Apr 20, 2011 at 15:10
• 2 you could do it like this: thumbnail and on top or right next to it you put your checkbox. then via jquery you hide the checkboxes and attach your click events to the thumbnails that check and uncheck the checkboxes. thus you have support for browsers supporting jquery and not supporting any javascript at all. if the browser doesn't support the js then the checkboxes won't be hidden and the checkboxes are usable as usual. if the browser does then they will be hidden and the fancy js actions will be used instead. – ITroubs Commented Apr 20, 2011 at 15:16

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 5

You could do it like this: thumbnail and on top or right next to it you put your checkbox. Then via jquery you hide the checkboxes and attach your click events to the thumbnails that check and uncheck the checkboxes. thus you have support for browsers supporting jquery and not supporting any javascript at all. if the browser doesn't support the js then the checkboxes won't be hidden and the checkboxes are usable as usual. if the browser does then they will be hidden and the fancy js actions will be used instead.

for example:

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

try it out. this may work but i give no guaranty.

For a javascript approach fiddle:

Markup:

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

Script:

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

If you want such fancy stuff as changing the border color of selected thumbnails, you will need javascript to do it. Especially if you need cross browser support.

As for when javascript is turned off, which I assume, is what you meant in your second point, I'd just use checkboxes for the thumbnails and let the user select what he/she needs.

本文标签： javascriptSelect multiple images from a grid of thumbnail imagesStack Overflow