"jQuery radio button with image"
Bootstrap 3.0.0 Snippet by Biplab01198

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$("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');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: