Using jQuery to set the class of an element corresponding to the selected radio button 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');
 }
});
&lt;div class="view-choice"&gt;
   &lt;input type="radio" name="choice" value="Option A"&gt;
   &lt;input type="radio" name="choice" value="Option B"&gt;
   &lt;input type="radio" name="choice" value="Option C"&gt;
   &lt;input type="radio" name="choice" value="Option D"&gt;    
&lt;/div&gt;

&lt;div class="img-wrapper option-a"&gt;&lt;/div&gt;
 




https://jsfiddle.net/fhaLztL6/
You could use labels for your radio inputs and use the actual class names for the values. Then on change, you'd just remove all the option classes and pass in your inputVal for the class to add. See the snippet below (colors added to the classes via CSS and text added in .img-wrapper to show it working).



$('input[name=choice]').change(function(){
 var inputVal = $('input[name=choice]:checked').val();
   
 $(".img-wrapper")
  .removeClass('option-a option-b option-c option-d')
  .addClass(inputVal);
});
.option-a
{
  color: red;
}

.option-b
{
  color: green;
}

.option-c
{
  color: blue;
}

.option-d
{
  color: yellow;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="view-choice"&gt;
   &lt;label for="option-a"&gt;Option A&lt;/label&gt;
   &lt;input type="radio" name="choice" value="option-a" checked&gt;
   &lt;label for="option-b"&gt;Option B&lt;/label&gt;
   &lt;input type="radio" name="choice" value="option-b"&gt;
   &lt;label for="option-c"&gt;Option C&lt;/label&gt;
   &lt;input type="radio" name="choice" value="option-c"&gt;
   &lt;label for="option-d"&gt;Option D&lt;/label&gt;
   &lt;input type="radio" name="choice" value="option-d"&gt;    
&lt;/div&gt;

&lt;div class="img-wrapper option-a"&gt;Blah&lt;/div&gt;