HTML / Javascript“重置”按钮可在不使用JQuery的情况下选择另一个按钮

时间:2018-07-08 22:20:32

标签: javascript html button toggle reset

我有加/减按钮,用于描述通过算法进行的导航。就目前而言,我已经进行了设置,因此,当您单击减号按钮时,它将折叠所有后续的div,并清除从该点开始的单选按钮选择。但是,我还需要它重置折叠按钮下方的所有“加号”按钮,以便用户在选择单选按钮之前会看到已禁用的前进按钮。

有没有一种方法可以将其添加到“隐藏”功能中,以重置包含原始加号按钮的每个div?如果可能的话,我不想使用Jquery。

我仍在学习javascript,所以我希望这是有道理的。谢谢!

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

function changeSign(name) {
  var image = document.getElementsByName(name)[0];

  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 show1(name) {
  changeSign(name);
  var image = document.getElementsByName(name)[0];
  if (image.getAttribute('src') == "image/plus_btn.png") {
    console.log("hiding")
    document.getElementById('div1').style.display = 'none';
    document.getElementById("div1pos").checked = false;
    document.getElementById("div1neg").checked = false;
    document.getElementById('div11').style.display = 'none';
    document.getElementById("div11pos").checked = false;
    document.getElementById("div11neg").checked = false;
    document.getElementById('div2').style.display = 'none';
    document.getElementById("div2norm").checked = false;
    document.getElementById("div2abn").checked = false;
    document.getElementById('div4').style.display = 'none';
    document.getElementById("div4norm").checked = false;
    document.getElementById("div4abn").checked = false;
    document.getElementById('div4_1').style.display = 'none';
    document.getElementById('div5').style.display = 'none';
    document.getElementById('div6').style.display = 'none';
    document.getElementById('div7').style.display = 'none';
    document.getElementById('div8').style.display = 'none';
    document.getElementById('div9').style.display = 'none';
    document.getElementById('div10').style.display = 'none';
    document.getElementById('div12').style.display = 'none';
    document.getElementById('div13').style.display = 'none';
    document.getElementById("div13first").checked = false;
    document.getElementById("div13secorthird").checked = false;
    document.getElementById('div14').style.display = 'none';
    document.getElementById('div15').style.display = 'none';
    document.getElementById("div15norm").checked = false;
    document.getElementById("div15abnml").checked = false;
    document.getElementById('div16').style.display = 'none';
    document.getElementById('div17').style.display = 'none';
    document.getElementById('div18').style.display = 'none';
    document.getElementById('div19').style.display = 'none';
    document.getElementById('div20').style.display = 'none';
    document.getElementById("div20yes").checked = false;
    document.getElementById("div20no").checked = false;
    document.getElementById('div21').style.display = 'none';
    document.getElementById("div21norm").checked = false;
    document.getElementById("div21abnorm").checked = false;
    document.getElementById('div22').style.display = 'none';
    document.getElementById('div23').style.display = 'none';
    document.getElementById('div24').style.display = 'none';
    document.getElementById('div25').style.display = 'none';
    document.getElementById('div26').style.display = 'none';
    document.getElementById('div27').style.display = 'none';
    document.getElementById('div28').style.display = 'none';
    document.getElementById("div28norm").checked = false;
    document.getElementById("div28abnorm").checked = false;
    document.getElementById('div29').style.display = 'none';
    document.getElementById('div30').style.display = 'none';
    document.getElementById('div31').style.display = 'none';

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

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

function show2(name) {
  changeSign(name);
  var image = document.getElementsByName(name)[0];
  if (image.getAttribute('src') == "image/plus_btn.png") {
    document.getElementById('div4').style.display = 'none';
    document.getElementById("div4norm").checked = false;
    document.getElementById("div4abn").checked = false;
    document.getElementById('div2').style.display = 'none';
    document.getElementById("div2norm").checked = false;
    document.getElementById("div2abn").checked = false;
    document.getElementById('div13').style.display = 'none';
    document.getElementById("div13first").checked = false;
    document.getElementById("div13secorthird").checked = false;
    document.getElementById('div12').style.display = 'none';
    document.getElementById('div4_1').style.display = 'none';
    document.getElementById('div5').style.display = 'none';
    document.getElementById('div6').style.display = 'none';
    document.getElementById('div7').style.display = 'none';
    document.getElementById('div8').style.display = 'none';
    document.getElementById('div9').style.display = 'none';
    document.getElementById('div10').style.display = 'none';
    document.getElementById('div11').style.display = 'none';
    document.getElementById("div11pos").checked = false;
    document.getElementById("div11neg").checked = false;
    document.getElementById('div14').style.display = 'none';
    document.getElementById('div15').style.display = 'none';
    document.getElementById("div15norm").checked = false;
    document.getElementById("div15abnml").checked = false;
    document.getElementById('div16').style.display = 'none';
    document.getElementById('div17').style.display = 'none';
    document.getElementById('div18').style.display = 'none';
    document.getElementById('div19').style.display = 'none';
    document.getElementById('div20').style.display = 'none';
    document.getElementById("div20yes").checked = false;
    document.getElementById("div20no").checked = false;
    document.getElementById('div21').style.display = 'none';
    document.getElementById("div21norm").checked = false;
    document.getElementById("div21abnorm").checked = false;
    document.getElementById('div22').style.display = 'none';
    document.getElementById('div23').style.display = 'none';
    document.getElementById('div24').style.display = 'none';
    document.getElementById('div25').style.display = 'none';
    document.getElementById('div26').style.display = 'none';
    document.getElementById('div27').style.display = 'none';
    document.getElementById('div28').style.display = 'none';
    document.getElementById("div28norm").checked = false;
    document.getElementById("div28abnorm").checked = false;
    document.getElementById('div29').style.display = 'none';
    document.getElementById('div30').style.display = 'none';
    document.getElementById('div31').style.display = 'none';


  } else {
    if (document.querySelector('input#div0symp').checked &&
      document.querySelector('input#div1pos').checked) {
      document.getElementById('div2').style.display = 'none';
      document.getElementById('div13').style.display = 'none';
      document.getElementById('div12').style.display = 'none';
      document.getElementById('div4').style.display = 'block';
    }
    if (document.querySelector('input#div0symp').checked &&
      document.querySelector('input#div1neg').checked) {
      document.getElementById('div4').style.display = 'none';
      document.getElementById('div13').style.display = 'none';
      document.getElementById('div12').style.display = 'none';
      document.getElementById('div2').style.display = 'block';
    }
    if (document.querySelector('input#div0asymp').checked &&
      document.querySelector('input#div11pos').checked) {
      document.getElementById('div4').style.display = 'none';
      document.getElementById('div2').style.display = 'none';
      document.getElementById('div12').style.display = 'none';
      document.getElementById('div13').style.display = 'block';
    }
    if (document.querySelector('input#div0asymp').checked &&
      document.querySelector('input#div11neg').checked) {
      document.getElementById('div4').style.display = 'none';
      document.getElementById('div2').style.display = 'none';
      document.getElementById('div13').style.display = 'none';
      document.getElementById('div12').style.display = 'block';
    }
  }
}

function enableBtn(name) {
  var btn = document.getElementsByName(name)[0];
  btn.removeAttribute("disabled");
  btn.setAttribute("style", "opacity:1;")
}
<body>
  <h1 align="center">Evaluation of a Patient</h1>

  <div id="div0" class="show" align="center">
    <div id="test0" class="action" align="left">
      <p align="left">Test patient andd perform a symptom screen</p>
      <label> <input type="radio" name="tab" id='div0symp' value="symptomatic" onClick="enableBtn('plus0');"/> <span>Patient is symptomatic </span></label> <br>
      <label> <input type="radio" name="tab" id='div0asymp' value="asymptomatic" onClick="enableBtn('plus0');"/> <span>Patient is asymptomatic </span>
			</label>
    </div>

    <div id="plus0" class="nextbutton" align="center">
      <input type="image" src="image/plus_btn.png" width="40" name="plus0" disabled="disabled" style="opacity:0.3;" onclick="show1('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="TST1" class="action" align="left">
      <p>
        Test the patient<br>Test Result is:
      </p>
      <label><input type="radio" id='div1pos' name="tab2" value="positive" onClick="enableBtn('plus1');"/> <span>Positive</span> &nbsp;</label> <br>
      <label><input type="radio" id='div1neg' name="tab2" value="negative" onClick="enableBtn('plus1');"/> <span>Negative</span></label>
    </div>

    <div id="plus1" class="nextbutton" align="center">
      <input type="image" src="image/plus_btn.png" width="40" name="plus1" disabled="disabled" style="opacity:0.3;" onclick="show2('plus1');" />
    </div>

  </div>

0 个答案:

没有答案