隐藏单选按钮，直到满足条件

Question

关于Javascript / html，我是自学成才的，我无法隐藏单选按钮，直到制作出某个物品https://jsfiddle.net/tmanrocks999/dfroan50/32/。我基本上希望隐藏除第一行以外的所有单选按钮（Woodsword，皮革头盔） ，皮靴，皮革盔甲）

在这个小提琴中确实有一个我想使用的功能，但似乎不起作用。如果有人可以帮助我隐藏除第一行以外的所有单选按钮，直到精心制作出来，我将不胜感激。

var Strength = 0;
var Magic = 0;
var ManaPoints = 0;
var HitPoints = 0;
var StoredStrengthe = Strength;
var StoredMagic = Magic;
var StoredManaPoints = ManaPoints;
var StoredHitPoints = HitPoints;

function woodsworde() {
  if (document.getElementById("woodsword").checked) {
    Strength = Strength + 1;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function silversworde() {
  if (document.getElementById("silversword").checked) {
    Strength = Strength + 3;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function goldsworde() {
  if (document.getElementById("goldsword").checked) {
    Strength = Strength + 5;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function diamondsworde() {
  if (document.getElementById("diamondsword").checked) {
    Strength = Strength + 10;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}



function leatherhelme() {
  if (document.getElementById("leatherhelm").checked) {
    Magic = Magic + 1;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function silverhelme() {
  if (document.getElementById("silverhelm").checked) {
    Magic = Magic + 3;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function goldhelme() {
  if (document.getElementById("goldhelm").checked) {
    Magic = Magic + 5;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function diamondhelme() {
  if (document.getElementById("diamondhelm").checked) {
    Magic = Magic + 10;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}


function leatherbootse() {
  if (document.getElementById("leatherboots").checked) {
    ManaPoints = ManaPoints + 3;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function silverbootse() {
  if (document.getElementById("silverboots").checked) {
    ManaPoints = ManaPoints + 5;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function goldbootse() {
  if (document.getElementById("goldboots").checked) {
    ManaPoints = ManaPoints + 10;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function diamondbootse() {
  if (document.getElementById("diamondboots").checked) {
    ManaPoints = ManaPoints + 15;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}


function leatherarmore() {
  if (document.getElementById("leatherarmor").checked) {
    HitPoints = HitPoints + 1;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function silverarmore() {
  if (document.getElementById("silverarmor").checked) {
    HitPoints = HitPoints + 3;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function goldarmore() {
  if (document.getElementById("goldarmor").checked) {
    HitPoints = HitPoints + 5;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function diamondarmore() {
  if (document.getElementById("diamondarmor").checked) {
    HitPoints = HitPoints + 10;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

document.getElementById("woodsword").addEventListener("change",
  silversworde);
document.getElementById("woodsword").addEventListener("change",
  woodsworde);
document.getElementById("silversword").addEventListener("change",
  woodsworde);
document.getElementById("silversword").addEventListener("change",
  silversworde);
document.getElementById("goldsword").addEventListener("change",
  woodsworde);
document.getElementById("goldsword").addEventListener("change",
  goldsworde);
document.getElementById("diamondsword").addEventListener("change",
  woodsworde);
document.getElementById("diamondsword").addEventListener("change",
  diamondsworde);
document.getElementById("Strength").innerHTML = Strength;


document.getElementById("leatherhelm").addEventListener("change",
  silverhelme);
document.getElementById("leatherhelm").addEventListener("change",
  leatherhelme);
document.getElementById("silverhelm").addEventListener("change",
  leatherhelme);
document.getElementById("silverhelm").addEventListener("change",
  silverhelme);
document.getElementById("goldhelm").addEventListener("change",
  leatherhelme);
document.getElementById("goldhelm").addEventListener("change", goldhelme);
document.getElementById("diamondhelm").addEventListener("change",
  leatherhelme);
document.getElementById("diamondhelm").addEventListener("change",
  diamondhelme);
document.getElementById("Magic").innerHTML = Magic;

document.getElementById("leatherboots").addEventListener("change",
  silverbootse);
document.getElementById("leatherboots").addEventListener("change",
  leatherbootse);
document.getElementById("silverboots").addEventListener("change",
  leatherbootse);
document.getElementById("silverboots").addEventListener("change",
  silverbootse);
document.getElementById("goldboots").addEventListener("change",
  leatherbootse);
document.getElementById("goldboots").addEventListener("change",
  goldbootse);
document.getElementById("diamondboots").addEventListener("change",
  leatherbootse);
document.getElementById("diamondboots").addEventListener("change",
  diamondbootse);
document.getElementById("ManaPoints").innerHTML = ManaPoints;



document.getElementById("leatherarmor").addEventListener("change",
  silverarmore);
document.getElementById("leatherarmor").addEventListener("change",
  leatherarmore);
document.getElementById("silverarmor").addEventListener("change",
  leatherarmore);
document.getElementById("silverarmor").addEventListener("change",
  silverarmore);
document.getElementById("goldarmor").addEventListener("change",
  leatherarmore);
document.getElementById("goldarmor").addEventListener("change",
  goldarmore);
document.getElementById("diamondarmor").addEventListener("change",
  leatherarmore);
document.getElementById("diamondarmor").addEventListener("change",
  diamondarmore);
document.getElementById("HitPoints").innerHTML = HitPoints;



var silversword = 0;
document.getElementById("silversword").innerHTML = silversword;
var silverhelm = 0;
var silverboots = 0;
var silverarmor = 0;
var Silver = 500;
document.getElementById("Silver").innerHTML = Silver;
var goldsword = 0;
document.getElementById("goldsword").innerHTML = goldsword;
var goldhelm = 0;
var goldboots = 0;
var goldarmor = 0;
var Gold = 2000;
document.getElementById("Gold").innerHTML = Gold;
var diamondsword = 0;
document.getElementById("diamondsword").innerHTML = diamondsword;
var diamondhelm = 0;
var diamondboots = 0;
var diamondarmor = 0;
var Diamond = 10000;
document.getElementById("Diamond").innerHTML = Diamond;

function buySsword() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silversword = silversword + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silversword").innerHTML = silversword;
  }
  checkcraft()
}

function buyGsword() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldsword = goldsword + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldsword").innerHTML = goldsword;
  }
  checkcraft()
}

function buyDsword() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondsword = diamondsword + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondsword").innerHTML = diamondsword;
  }
  checkcraft()
}

function buyShelm() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverhelm = silverhelm + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverhelm").innerHTML = silverhelm;
  }
  checkcraft()
}

function buyGhelm() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldhelm = goldhelm + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldhelm").innerHTML = goldhelm;
  }
  checkcraft()
}

function buyDhelm() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondhelm = diamondhelm + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondhelm").innerHTML = diamondhelm;
  }
  checkcraft()
}

function buySboots() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverboots = silverboots + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverboots").innerHTML = silverboots;
  }
  checkcraft()
}

function buyGboots() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldboots = goldboots + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldboots").innerHTML = goldboots;
  }
  checkcraft()
}

function buyDboots() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondboots = diamondboots + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondboots").innerHTML = diamondboots;
  }
  checkcraft()
}

function buySarmor() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverarmor = silverarmor + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverarmor").innerHTML = silverarmor;
  }
  checkcraft()
}

function buyGarmor() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldarmor = goldarmor + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldarmor").innerHTML = goldarmor;
  }
  checkcraft()
}

function buyDarmor() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondarmor = diamondarmor + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondarmor").innerHTML = diamondarmor;
  }
  checkcraft()
}


function checkcraft() {
  if (silversword < 1) {
    document.getElementById("SilverSwordBtn").disabled = false;
  } else {
    document.getElementById("SilverSwordBtn").disabled = true;
  }
  if (goldsword < 1) {
    document.getElementById("GoldSwordBtn").disabled = false;
  } else {
    document.getElementById("GoldSwordBtn").disabled = true;
  }
  if (diamondsword < 1) {
    document.getElementById("DiamondSwordBtn").disabled = false;
  } else {
    document.getElementById("DiamondSwordBtn").disabled = true;
  }
  if (silverhelm < 1) {
    document.getElementById("SilverHelmBtn").disabled = false;
  } else {
    document.getElementById("SilverHelmBtn").disabled = true;
  }
  if (goldhelm < 1) {
    document.getElementById("GoldHelmBtn").disabled = false;
  } else {
    document.getElementById("GoldHelmBtn").disabled = true;
  }
  if (diamondhelm < 1) {
    document.getElementById("DiamondHelmBtn").disabled = false;
  } else {
    document.getElementById("DiamondHelmBtn").disabled = true;
  }
  if (silverboots < 1) {
    document.getElementById("SilverBootsBtn").disabled = false;
  } else {
    document.getElementById("SilverBootsBtn").disabled = true;
  }
  if (goldboots < 1) {
    document.getElementById("GoldBootsBtn").disabled = false;
  } else {
    document.getElementById("GoldBootsBtn").disabled = true;
  }
  if (diamondboots < 1) {
    document.getElementById("DiamondBootsBtn").disabled = false;
  } else {
    document.getElementById("DiamondBootsBtn").disabled = true;
  }
  if (silverarmor < 1) {
    document.getElementById("SilverArmorBtn").disabled = false;
  } else {
    document.getElementById("SilverArmorBtn").disabled = true;
  }
  if (goldarmor < 1) {
    document.getElementById("GoldArmorBtn").disabled = false;
  } else {
    document.getElementById("GoldArmorBtn").disabled = true;
  }
  if (diamondarmor < 1) {
    document.getElementById("DiamondArmorBtn").disabled = false;
  } else {
    document.getElementById("DiamondArmorBtn").disabled = true;
  }
}

checkcraft()


var silverswordr = document.getElementById('silverswordr');
var goldswordr = document.getElementById('goldswordr');
var diamondswordr = document.getElementById('diamondswordr');

function checkWunlock() {
  if (silversword < 1) {
    silverswordr.style.visibility = 'hidden'
  } else {
    silverswordr.style.visibility = 'visible'
  }
  if (goldsword < 1) {
    goldswordr.style.visibility = 'hidden'
  } else {
    goldswordr.style.visibility = 'visible'
  }
  if (diamondsword < 1) {
    diamondswordr.style.visibility = 'hidden'
  } else {
    diamondswordr.style.visibility = 'visible'
  }

}

checkWunlock()

//document.getElementById("").addEventListener("change", checkWunlock);

<html>

<head>
  <title> Basic Clicker</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <div class="nav_bar">
    <ul>
      <li id="HomeTab"><a href="GameMainWindow.html">Home</a></li>
      <li id="SkillTreeTab"><a href="SkillTree.html">SkillTree</a></li>
      <li id="EquipmentTab"><a href="Equipment.html" id="onlink">Equipment</a></li>
      <li id="PetsTab"><a href="Pets.html">Pets</a></li>
      <li id="SkillsTab"><a href="Skills.html">Skills</a></li>
      <li id="QuestsTab"><a href="Quests.html">Quests</a></li>
      <li id="ShopTab"><a href="Shop.html">Shop</a></li>
    </ul>
  </div>
  <div class="main_container">

    <div id="Equipmentradios" style="width: 500px; float:left; ">
      <p>
        <font size="+2"> <b> Equipment </b></font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <br />
        <br /> Wood Sword<input id="woodsword" type="radio" name="Sword"> Silver Sword<input id="silversword" type="radio" name="Sword"> Gold Sword<input id="goldsword" type="radio" name="Sword"> Diamond Sword<input id="diamondsword" type="radio" name="Sword">
        <label class="radio">
                <br>
            Leather Helm <input id="leatherhelm"   type="radio" name="Helm">
            Silver Helm <input id="silverhelm"   type="radio" name="Helm">
            Gold Helm <input id="goldhelm"   type="radio" name="Helm">
            Diamond Helm <input id="diamondhelm"   type="radio" name="Helm">
                <label class="radio">
                <br>
            Leather Boots <input id="leatherboots"   type="radio" name="Boots">
            Silver Boots <input id="silverboots"   type="radio" name="Boots">
            Gold Boots <input id="goldboots"   type="radio" name="Boots">
            Diamond Boots <input id="diamondboots"   type="radio" name="Boots">
                <label class="radio">
                <br>
            Leather Armor <input id="leatherarmor"   type="radio" name="Armor">
            Silver Armor <input id="silverarmor"   type="radio" name="Armor">
            Gold Armor <input id="goldarmor"   type="radio" name="Armor">
            Diamond Armor <input id="diamondarmor"   type="radio" name="Armor">
                <label class="radio">
                <br>
                    </div>
                    
            <div id="crafting" style="width: 350px;   float:right;position: absolute; left: 650px; top: 115px; border: 15px solid green; height:300px; background:white; position: absolute; left: 600px; top: 115px; margin:10px">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font size="+2"> <b>Forge</b>
                    <br />
                    <font size="-2"> Silver Sword &nbsp;<button id="SilverSwordBtn" onclick="buySsword()">Craft</button> <font size="-2"> Gold Sword &nbsp;<button id="GoldSwordBtn" onclick="buyGsword()">Craft</button> <font size="-2"> Diamond Sword &nbsp;<button id="DiamondSwordBtn" onclick="buyDsword()">Craft</button>
                    <br />
                    <font size="-2"> Silver Helm &nbsp; &nbsp;<button id="SilverHelmBtn" onclick="buyShelm()">Craft</button> <font size="-2"> Gold Helm &nbsp;&nbsp;&nbsp;<button id="GoldHelmBtn" onclick="buyGhelm()">Craft</button> <font size="-2"> Diamond Helm &nbsp;&nbsp;<button id="DiamondHelmBtn" onclick="buyDhelm()">Craft</button>
                    <br />
                    <font size="-2"> Silver Boots &nbsp;&nbsp;<button id="SilverBootsBtn" onclick="buySboots()">Craft</button> <font size="-2"> Gold Boots &nbsp;&nbsp;<button id="GoldBootsBtn" onclick="buyGboots()">Craft</button> <font size="-2"> Diamond Boots &nbsp;<button id="DiamondBootsBtn" onclick="buyDboots()">Craft</button>
                    <br />
                    <font size="-2"> Silver Armor &nbsp;<button id="SilverArmorBtn" onclick="buySarmor()">Craft</button> <font size="-2"> Gold Armor &nbsp;&nbsp;<button id="GoldArmorBtn" onclick="buyGarmor()">Craft</button> <font size="-2"> Diamond Armor &nbsp;<button id="DiamondArmorBtn" onclick="buyDarmor()">Craft</button>
                    <br />
                    Strength+<span id="Strength">0</span>
                    Magic+<span id="Magic">0</span>
                    ManaPoints+<span id="ManaPoints">0</span>
                    HitPoints+<span id="HitPoints">0</span>
                    <br />
                    Silver= <span id="Silver">0</span>  <span id="silversword">0</span>
                    <br />
                    Gold= <span id="Gold">0</span>     <span id="goldsword">0</span>
                    <br />
                    Diamond= <span id="Diamond">0</span>  <span id="diamondsword">0</span>
                        </div>
                    
                   
       
        
                    
                <script type="text/javascript" src="Pets.js"></script>
                <script type="text/javascript" src="main.js"></script>
                <script type="text/javascript" src="Equipment.js"></script>
                <p>
     </div>

    </body></html>

一切都应该放在小提琴里。我尝试过的是用checkWunlock来检查武器是否被制作的按钮。我希望除了第一行以外的所有单选按钮都可以隐藏，直到制作出来为止，但是我所有单选按钮的实际输出都是可见的，因此播放器一开始就可以使用任何设备。我对工艺按钮的禁用使我很困惑为什么隐藏的东西也不能正常工作。如果我能找到隐藏我的单选按钮ID的有效方法，那就谢谢。

Answer 1

我已经修改了您的代码。

html

<input type="radio" name="Type" value="flat" id="flatRadio" />Wood Sword
<input type="radio" name="Type" value="salary" id="salaryRadio" />Silver Sword

<br />
<div id="wordSword" class="options">Wood Sword:
    Leather Helm <input id="leatherhelm"   type="radio" name="Helm">
            Silver Helm <input id="silverhelm"   type="radio" name="Helm">
            Gold Helm <input id="goldhelm"   type="radio" name="Helm">
            Diamond Helm <input id="diamondhelm"   type="radio" name="Helm"></div>
<div id="silverSword" class="options">Silver Sword:
     Leather Boots <input id="leatherboots"   type="radio" name="Boots">
            Silver Boots <input id="silverboots"   type="radio" name="Boots">
            Gold Boots <input id="goldboots"   type="radio" name="Boots">
            Diamond Boots <input id="diamondboots"   type="radio" name="Boots"></div>

css

.options {
display:none;

有关更多代码，请访问demo以获取完整代码

希望可以帮助您