How to switch jQuery class in HTML based on Radio Button choice

Question

I have a jQuery class that manipulates an image whenever it is applied to it, like this:

<div>
  <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="myJQclass1" />
</div>

This works perfectly on its own, however I also have 2 other jQuery classes: myJQclass2 and myJQclass3, these manipulate the image differently than myJQclass1.

What I’m trying to do is create 3 radio buttons and the user will be able to switch the class used depending on what radio button they select (this will change how the image looks).

This is my code so far:

<script>
function check(effect) {
    document.getElementById("answer").value=effect;
}
</script>

<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>

 <br>
 <div>
  <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
 </div>
</form>

This isn’t working, I think I’m making a basic error, but I’m not sure what it is. I’ve never worked with radio buttons nor jQuery before, so I would really appreciate any help with this.

Thank you in advance!

Answer 1

Use jQuery removeClass()/addClass(). Use the overload of removeClass() which allows you to remove multiple classes. Then add the class passed into the function

function check(effect) {
    $('.answer').removeClass('myJQclass1 myJQclass2 myJQclass3');
    $('.answer').addClass(effect);
}

.myJQclass1{
  color:yellow;
  }
.myJQclass2{
  color:green;
  }
.myJQclass3{
  color:blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

</script>

<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>

 <br>
 <div>
  <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
 </div>
</form>

Answer 2

You could simplify things a bit more:

$('input:radio').click(function() {
  var index = $(this).index('input:radio') + 1;
  $('.answer').attr('class', 'answer myJQclass' + index);
});

.myJQclass1 {
  color: red;
}
.myJQclass2 {
  color: blue;
}
.myJQclass3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" name="effect" />Change Colour
  <br/>
  <input type="radio" name="effect" />Change Brightness
  <br/>
  <input type="radio" name="effect" />Change Contrast
  <br/>
  <br/>
  <div>
    <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
  </div>
</form>