How to make images behave like checkboxes in a form?

I want to place a number of images inside a form and be able to select them by just clicking on them. Once an image is selected I can show a border around it indicating that it has been selected, like checkboxes multiple images can be selected in th开发者_JAVA技巧e same form.

But how to go about this? I am not sure how to have the form register the images as being selected elements, so when the form is submitted to the server side the values on these images will be sent over as well.

I wish I could just set the images as backgrounds of checkboxes but of course that won't work due to browser restrictions. Any ideas on how this could be done?

for your html do have this.

<form id="form1">
    <img src="barney.jpg" title="barney" id="barneyCheckImage" />
    <input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" />
    <input type="submit" value="Submit" />
</form>

for your scripts

$(document).ready(function() {

    $('form#form1').find('img#barneyCheckImage').toggle(
        function(){
            $(this).css('border', '1px solid green');
            $('form#form1').find('input[id=imgCheck]').attr('checked', 'checked');
        },
        function(){
            $(this).css('border', 'none');
            $('form#form1').find('input[id=imgCheck]').removeAttr('checked');
        }
    );

    // just to test for the checkbox.
    $('form#form1').submit(function(e){
        e.preventDefault();
        var form = $('form#form1').serialize();
        alert(form);
    });
});

Edit:

I've edited it for BalusC's concern.

For the input type image you can also do a $('#imgCheck') directly instead of $('form#form1').find('input[id=imgCheck]') but for me, I don't want to have a lot of id's on my form.

check out: http://api.jquery.com/image-selector/

<input type="image" />

 $("input:image").css({background:"yellow", border:"3px red solid"});

<!-- Choose some styles for our custom form elements -->
<style>
    .imageCheckbox {
        display: none;
    }

    .imageToggle .toggleImage {
        /* default/unselected image styles here */
    }
    .imageToggle .selectedImage {
        /* selected image styles here */
    }
</style>

<!-- Add a script to handle when the user clicks on an image -->
<script>
    function toggleImage(containerElem) {
        //toggle the checkbox value
        var checkBox = containerElem.getElementsByClassName("imageCheckbox");
        checkBox.checked = ! checkBox.checked;

        //update the image styles
        var image = containerElem.getElementsByClassName("toggleImage");
        if (checkBox.checked) {
            image.className += " selectedImage";
        }
        else {
            image.className = "toggleImage";
        }
    }
</script>

<!-- Build the form -->
<form>
    <div class="imageToggle" onclick="toggleImage(this);">
        <input class="imageCheckbox" type="checkbox" id="checkbox_0" name="checkbox_0" />
        <img class="toggleImage" src="/img_0.png" />
    </div>
    <div class="imageToggle" onclick="toggleImage(this);">
        <input class="imageCheckbox" type="checkbox" id="checkbox_1" name="checkbox_1" />
        <img class="toggleImage" src="/img_1.png" />
    </div>
    <!-- etc. -->
</form>