I'm a bit of a newb with jQuery but can get it working to perform the functionality that I'm after.
The below function checks the value of the radio input and then adds a class, depending on the selection. But it feels like there is a more efficient way of writing this.
$('input[name=choice]').change(function(){
var inputVal = $('input[name=choice]:checked').val();
if(inputVal == 'Option A') {
$(".img-wrapper").addClass('option-a');
} else {
$(".img-wrapper").removeClass('option-a');
}
if(inputVal == 'Option B') {
$(".img-wrapper").addClass('option-b');
$(".img-wrapper").removeClass('option-a');
} else {
$(".img-wrapper").removeClass('option-b');
}
if(inputVal == 'Option C') {
$(".img-wrapper").addClass('option-c');
$(".img-wrapper").removeClass('option-a');
} else {
$(".img-wrapper").removeClass('option-c');
}
if(inputVal == 'Option D') {
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
} else {
$(".img-wrapper").removeClass('option-d');
}
});
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper option-a"></div>