How to make images behave like checkboxes in a form?

Question

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 the 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?

rob waminal · Accepted Answer · 2011-05-19T03:39:57.903

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.

I'd select the form by its `id` rather than by a global form selector or just select the individual imgs/checkboxes themselves. This code will fail when you have multiple forms (eventually with checkbox inputs with the same name). — BalusC, May 19 '11 at 03:31
this is just a sample code, of course this will fail for multiple forms, the TS is just asking for the image checkbox behavior.. :) — rob waminal, May 19 '11 at 03:33

score 0 · Answer 2 · answered May 19 '11 at 03:05

0

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

<input type="image" />

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

answered May 19 '11 at 03:05

Avitus

15,640
6
43
53

aroth · Answer 3 · 2011-05-19T03:21:44.707

<!-- 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>

How to make images behave like checkboxes in a form?

3 Answers3

Edit: