如何使用此true / false标志使切换单选按钮禁用其他单选按钮效果

Question

我尝试过以下操作：

var changed = function() {
        if (document.getElementById('wolf').checked) {
           wolfActive = true;
           turtleActive = false;
           lizardActive = false;

       } else if (document.getElementById('lizard').checked) {
           lizardActive = true;
          wolfActive = false;
           turtleActive = false;

       } else if (document.getElementById('turtle').checked) {
           turtleActive = true;
           lizardActive = false;
           wolfActive = false;

       }
   }

但是当选择其他单选按钮时（我很难理解它的工作原理），我无法使每个单选按钮的效果都为假

这是我的JavaScript：

var Turtle = 1;
var Turtlelv = 1;
var TurtleCexp = 0;
var TurtleMexp = 100;
var NextMaxTurtleExp = TurtleMexp;
var Turtleregen = 0.5;
var Lizard = 1;
var Lizardlv = 1;
var LizardCexp = 0;
var LizardMexp = 100;
var NextMaxLizardExp = LizardMexp;
var Wolf = 1;
var Wolflv = 1;
var WolfCexp = 0;
var WolfMexp = 100;
var NextMaxWolfExp = WolfMexp;
var Strength = 2;
var Magic = 1;
var Wolfstrength = 1
var ManaPoints = 10






function Wolfandstrength() {
  if (document.getElementById("wolf-radio").checked) {
    Strength = Strength + Wolfstrength
   document.getElementById("Strength").innerHTML = Strength;
  } else {
   Strength = Strength - Wolfstrength
   document.getElementById("Strength").innerHTML = Strength;
 }
  }


   function wolfXpUp() {
    if (document.getElementById("wolf-radio").checked && WolfCexp < WolfMexp) 
   {
      setTimeout(wolfXpUp, 100)
     WolfCexp = WolfCexp + 1;
     document.getElementById("WolfCexp").innerHTML = WolfCexp;
   } 
       if (WolfCexp >= WolfMexp) {
         Wolflv = Wolflv + 1;
         WolfCexp = 0;
         Wolf = Wolf + 1;
         Wolfstrength = Wolfstrength + 1;
         Strength = Strength + 1;
        NextMaxWolfExp= NextMaxWolfExp *1.5;
      }
    document.getElementById("Strength").innerHTML = Strength;
    document.getElementById('WolfMexp').innerHTML = NextMaxWolfExp;
    document.getElementById('Wolflv').innerHTML = Wolflv;
    document.getElementById('WolfCexp').innerHTML = WolfCexp;
    document.getElementById('Wolf').innerHTML = Wolf;
}

   function lizardXpUp() {
    if (document.getElementById("lizard-radio").checked && LizardCexp < 
   LizardMexp) {
       setTimeout(lizardXpUp, 200)
        LizardCexp = LizardCexp + 1;
       document.getElementById("LizardCexp").innerHTML = LizardCexp;
     } 
       if (LizardCexp >= LizardMexp) {
          Lizardlv = Lizardlv + 1;
          LizardCexp = 0;
          Lizard = Lizard + 1;
          Lizardmagic = Lizardmagic + 1;
          Magic = Magic + 1;
         NextMaxLizardExp= NextMaxLizardExp *1.5;
       }
          document.getElementById("Magic").innerHTML = Magic;
          document.getElementById('LizardMexp').innerHTML = 
   NextMaxLizardExp;
            document.getElementById('Lizardlv').innerHTML = Lizardlv;
            document.getElementById('LizardCexp').innerHTML = LizardCexp;
            document.getElementById('Lizard').innerHTML = Lizard;
        }

   function turtleXpUp() {
     if (document.getElementById("turtle-radio").checked && Turtleexp < 
   TurtleMexp) {
       setTimeout(turtleXpUp, 200)
       TurtleCexp = TurtleCexp + 1;
       document.getElementById("TurtleCexp").innerHTML = TurtleCexp;
     } 
        if (TurtleCexp >= TurtleMexp) {
          Turtlelv = Turtlelv + 1;
           TurtleCexp = 0;
          Turtle = Turtle + 1;
          Tmanapoints = Tmanapoints + 1;
          ManaPoints = ManaPoints + 1;
         NextMaxLizardExp= NextMaxLizardExp *1.5;
        }
       document.getElementById("ManaPoints").innerHTML = ManaPoints;
       document.getElementById('TurtleMexp').innerHTML = NextMaxTurtleExp;
       document.getElementById('Turtlelv').innerHTML = Turtlelv;
       document.getElementById('TurtleCexp').innerHTML = TurtleCexp;
       document.getElementById('Turtle').innerHTML = Turtle;
   }








document.getElementById("wolf-radio").addEventListener("change", wolfXpUp)   
document.getElementById("wolf-radio").addEventListener("change", 
Wolfandstrength)
document.getElementById("lizard-radio").addEventListener("change", 
lizardXpUp)
document.getElementById("lizard-radio").addEventListener("change", 
Wolfandstrength);
document.getElementById("Strength").innerHTML = Strength;   
document.getElementById("Magic").innerHTML = Magic;
document.getElementById("ManaPoints").innerHTML = ManaPoints;

HTML代码：（如果需要可以更改，但不完美）

font size="+2"> <b> Pets </b></font>

<div id="turtle" class="control">
   <label class="radio">
    <input type="radio" name="Pets" id="turtle-radio">
   </label><img src="turtle.png" alt="turtle" height="100" width="100"> Lv 
   <span id="Turtlelv">1</span> <span id="TurtleCexp">0</span> / <span 
  id="TurtleMexp">100</span>
      <br />
      <br />

       <div id="lizard" class="control">
         <label class="radio">
            <input type="radio" name="Pets" id="lizard-radio">
        </label><img src="lizard.png" alt="lizard" height="42" width="42"> 
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Lv <span 
    id="Lizardlv">1</span> <span id="LizardCexp">0</span> / <span 
    id="LizardMexp">100</span>
       <br />
        <div id="wolf" class="control">
          <label class="radio">
           <input type="radio" name="Pets"  id="wolf-radio">
           </label><img src="wolf.png" alt="wolf" height="60" width="60"> 
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lv <span id="Wolflv">1</span> <span 
    id="WolfCexp">0</span> / <span id="WolfMexp">100</span></div>
       <br />
      <span id="Strength">0</span>
        <br />
      <span id="Magic">0</span>
           <br />
      <span id="ManaPoints">0</span>

我希望在我已经尝试过的框中使用true / false函数，以帮助我在选择其他单选按钮时禁用单选按钮功能/ stat buff。但是，当您从“乌龟”单选按钮切换到“蜥蜴”单选按钮时，如果不选择“狼”单选按钮，则应保持不动的强度，但实际输出会减少1强度。