jquery / javascript for a user to select 1 of n images

I want to display a few images (probably 5 max) and have a user click to select one. First thing I tried was radio buttons and putting the images inside labels.

<input type="radio" name="BackgroundId" id="BackgroundId" value="1" />
<label for="BackgroundId"><img src="../../Content/images/thumb_1.jpg" /></label>

Firefox will select the radio button when the user clicks the image, but IE doesn't.

Is there a jquery plugin that will make the images clickable? Fancy-form looks like something I could use, but it isn't jquery and I've already got jquery in my project.

Or can someone point me to a be开发者_StackOverflowtter way of selecting a single image?

Something like

$(function(){
    $("label img").click(function(){
        var parent = $(this).parent();
        $("#" + parent.attr("for")).attr("checked", "checked");
    });
});

Just drop this javascript into your page. I have tested it.

<script language="javascript" type="text/javascript">
    $(document).ready(
    function ()
    {
        var selImg =  $("#BackgroundId").next("label").find("img");
        selImg.click(
            function ()
            {
                $("#BackgroundId")[0].click();
            });

    });
</script>

The code reads: Get all the next element after those elements that have an id='BackgroundId' Now find an img element inside each one. Set the click events if each found img to call a function that will simulate a click on all those elements that have an id='BackgroundId'.

Please note that even though I am writing "all those" and "each tag", since there is only one tag with the id of 'BackgroundId', all these things are happening singularly.