How can I get radio button behaviour with images?

I want to add an image to a radio button so that when one button is selected all other button sho开发者_如何学运维uld be in non-selected mode (like a radio button group behaves).

But I want to achieve it with images. What is the way to do it?

If you don‘t mind the radio buttons being visible (which is probably a good idea, so that users understand what’s going on more easily), this should do:

<fieldset>
    <legend>Images</legend>

    <label for="image_1">
        <input id="image_1" name="image" type="radio">

        <img>
    </label>

    <label for="image_2">
        <input id="image_2" name="image" type="radio">

        <img>
    </label>
</fieldset>

Otherwise, if you really just want your images to behave like radio buttons, then you’ll need to write some JavaScript that makes the images imitate all the behaviour of radio buttons (i.e. assign functions to the onclick event of the images, and other events so that they work with keyboards for users who don’t use mice).

You could still include the radio buttons, but hide them via CSS, and write your JavaScript so that it changes the state of the hidden radio buttons when users interact with the images.

Check:

<input type="radio" name="group1" value="1" />
<input type="radio" name="group1" value="2" />

And other group of radio buttons:

<input type="radio" name="group2" value="3" />
<input type="radio" name="group2" value="4" />
<input type="radio" name="group2" value="5" />

If you want to support older browsers (IE) I think you'll have to do it with js. Consider this html:

<img class="radio" src="radio1.jpg" id="radio1"/>
<img class="radio" src="radio2.jpg" id="radio2"/>
<img class="radio" src="radio3.jpg" id="radio3"/>
<img class="radio" src="radio4.jpg" id="radio4"/>
<img class="radio" src="radio5.jpg" id="radio5"/>

and jquery:

$(".radio").click(function(){
    $("this").addClass("selected").siblings().removeClass("selected")
})

to read selected value just get the id of img.selected.