HTML / Javascript控件激活显示/隐藏

Question

我有这种算法可以通过各种流程图进行工作。目前，根据一组逻辑标准，我可以将其设置为下一步。我需要做的是更改“下一步”按钮（即.nextbutton）的控制，以便：

1）在单击单选按钮之前，它应为灰色加号。

2）单击单选按钮选择时，加号将变为可单击的蓝色符号。

3）单击下一步按钮时，它应该变成减号按钮（或后退按钮）。

我拥有所有这些图像。灰色按钮称为“ plus_btn_grey”。如何更改div中的逻辑以匹配此逻辑？

var image = document.getElementById("plus");

function changeSign(id) {
  var image = document.getElementById(id);

  if (image.getAttribute('src') == "image/plus_btn.png") {
    image.src = "image/minus_btn.png";
    console.log("Showing");
  } else {
    image.src = "image/plus_btn.png";
  }
}

function show0(id) {
  changeSign(id);
  var image = document.getElementById(id);
  if (image.getAttribute('src') == "image/plus_btn.png") {
    console.log("hiding")
  } else {
    if (document.querySelector('input#div0norm').checked) {
      console.log("div0");
      document.getElementById('div1').style.display = 'none';
      document.getElementById('div34').style.display = 'block';

    }
    if (document.querySelector('input#div0abnorm').checked) {
      console.log("div11")
      document.getElementById('div34').style.display = 'none';
      document.getElementById('div1').style.display = 'block';
    }
  }
}

<h1 align="center">Management of Case</h1>

<div id="div0" class="show" align="center">
  <div id="labs0" class="action" align="left">
    <p align="left">Draw Baseline Labs</p>
    <label> <input type="radio" name="tab" id='div0norm'
            value="normal" /> <span>Labs return Normal </span></label> <br>
    <label> <input type="radio" name="tab" id='div0abnorm'
            value="abnormal" /> <span>Labs return Abnormal </span>
        </label>
  </div>

  <div class="nextbutton" align="center">
    <img id="plus0" src="image/plus_btn.png" width="40" onclick="show0('plus0');" />
  </div>

</div>

<div id="div1" class="hide" align="center">

  <div id="div100" class="show" align="center">
    <img id="arrow" src="image/arrow-black.gif" alt="MISSING GIF">
  </div>

  <div id="lfts1" class="action" align="left">
    <p align="left">Eliminate hepatotoxic agents: repeat LFTs in 7-10 days</p>
    <label> <input type="radio" name="tab1" id='div1less3x'
            value="less3xnorm" /> <span>Less than 3 times upper normal </span></label> <br>
    <label> <input type="radio" name="tab1" id='div1more3x'
            value="great3xnorm" /> <span>More than 3 times upper normal </span>
        </label><br>
    <label> <input type="radio" name="tab1" id='div1more5x'
            value="great5xnorm" /> <span>More than 5 times upper normal </span>
        </label>
  </div>

  <div class="nextbutton" align="center">
    <img id="plus1" src="image/plus_btn.png" width="40" onclick="show1('plus1');" />
  </div>