<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul> <li> <a id="customoptions_image_0_0" title="" onClick="return false;" href="#"> <img class="small-image-preview img-responsive v-middle" title="" src="http://apicta.org.bd/assets/images/gallery/judge_meeting2017/thumb/01.jpg"> </a> <input id="options_9_3" class="radio validate-one-required-by-name product-custom-option" type="radio" value="22" name="options[9]" onClick="opConfig.reloadPrice();"> </li> <li> <a id="customoptions_image_0_0" title="" onClick="return false;" href="#"> <img class="small-image-preview img-responsive v-middle" title="" src="http://apicta.org.bd/assets/images/gallery/dinner/thumb/03.jpg"> </a> <input id="options_9_4" class="radio validate-one-required-by-name product-custom-option" type="radio" value="23" name="options[9]" onClick="opConfig.reloadPrice();"> </li> </ul>

li{ border:1px solid #FFF; padding:5px; list-style:none; display:inline-block; width:150px; margin:10px; } img{ width:100%; } .active{ border:1px solid red; padding:5px; } input[type=radio]{ display:none; }

$("a").click(function() { $(this).next().prop("checked", "checked"); }); $('a').click(function() { $('li:has(input:radio:checked)').addClass('active'); $('li:has(input:radio:not(:checked))').removeClass('active'); });