Whenever the checkbox is checked, it should add a class to the main div. Additionally, if I try to check another checkbox, the previously checked one should have its class removed and the new one should have the class added.
Here is the code snippet for reference:
$(".img-rdo :checkbox").change(function() {
$this.closest(".img-rdo").toggleClass('checked', this.checked);
})
$('.img-rdo .imgRdo').change(function() {
$(this).closest('.img-rdo').find(':checkbox').prop('checked', this.value != 0).change();
});.img-rdo {
background: yellow;
margin: 10px;
}
.img-rdo.checked {
background: green;
margin: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-rdo" nk-rdo-style="1">
<input type="radio" id="img-rdo2" name="img-sample-1" class="imgRdo">
<label class="imgRdo-lbl" for="img-rdo2">
<div class="rdo-txt">Radio Button with image design component</div>
</label>
</div>
<div class="img-rdo">
<input type="radio" id="img-rdo3" name="img-sample-1" class="imgRdo">
<label class="imgRdo-lbl" for="img-rdo3">
<div class="rdo-txt">Radio Image</div>
</label>
</div>
<div class="img-rdo">
<input type="radio" id="img-rdo4" name="img-sample-1" class="imgRdo">
<label class="imgRdo-lbl" for="img-rdo4">
<div class="rdo-txt">Radio Image</div>
</label>
</div>