style.transform = "rotate()" more than once?

Question

I have an svg image that rotates 360deg when I click on a checkbox. I use style.transform. But when I uncheck, it doesn't do it again.

Is there any way to make it rotate more than once without refreshing?

I have tried including the same function in "else"

<input type="checkbox" id="myCheck"  onclick="myFunction()">
<label for="myCheck"><img src="logo.svg" id="svg1"></label>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }
}
</script>

Currently it just rotate once. It does not do it again when I click again.

Answer 1

hmmm. why your else has 360deg too ? If I'm right you should say

if(input.checked) document.getElementById("svg1").style.transform = "rotate(360deg)";
else document.getElementById("svg1").style.transform = "rotate(0)";