Selecting a radio button when clicking an image

I want to select radio button when I click on his image but it's not working. This is what I've tried:

<ul id="options-31-list" class="options-list">
    <li>
        <a id="customoptions_image_0_0" class="mydata" title="" href="getImage/big/1/group_id/options/option_id/31/value_id/84/file/o2.jpg/" data="84">
            <img class="small-image-preview v-middle" title="" src="getImage/group_id/options/option_id/31/value_id/84/file/o2.jpg/">
        </a>
        <input id="options_31_2" class="radio validate-one-required-by-name product-custom-option" type="radio" data="84" value="84" name="options[31]" onclick="opConfig.reloadPrice();">
    </li>
    <li>
        <a id="customoptions_image_0_0" class="mydata" title="" href="getImage/big/1/group_id/options/option_id/31/value_id/85/file/vodafone.jpg/" data="85">
            <img class="small-image-preview v-middle" title="" src="getImage/group_id/options/option_id/31/value_id/85/file/vodafone.jpg/">
        </a>
        <input id="options_31_3" class="radio validate-one-required-by-name product-custom-option" type="radio" data="85" value="85" name="options[31]" onclick="opConfig.reloadPrice();">
    </li>
    <li>
        <a id="customoptions_image_0_0" class="mydata" title="" href="getImage/big/1/group_id/options/option_id/31/value_id/86/file/t-mobile.jpg/" data="86">
            <img class="small-image-preview v-middle" title="" src="getImage/group_id/options/option_id/31/value_id/86/file/t-mobile.jpg/">
        </a>
        <input id="options_31_4" class="radio validate-one-required-by-name product-custom-option" type="radio" data="86" value="86" name="options[31]" onclick="opConfig.reloadPrice();">
    </li>
</ul>

I have the same data="" attribute for both: for image and for input, is there any way to make the input (that radio) to be checked when I click on image?

Thank you