CODEWITHSUNDEEP
javascripthtml
MAb2021
MAb2021

Reputation: 127

Show specific div based on multiple checked radio buttons

I am trying to show a certain div based on a number of radio button selections. So, I would like it to show div9 if div0=symptomatic, div1=negative, & div2=normal, however I am not getting that result. Thank you!

function show1(){
	 document.getElementById('div1').style.display ='block';
	}
function show2(){
	  document.getElementById('div1').style.display = 'block';
	}
function show3(){
	  document.getElementById('div2').style.display ='block';
	}
function show4(){
	  document.getElementById('div2').style.display = 'block';
	}
function show5(){
	if ('input[value=div0symp]:checked, input[value=div1neg]:checked, input[value=div2norm]:checked').length == 3)
	 document.getElementById('div9').style.display = 'block';
    }
<div id="div0" class="show">
  <input type="radio" name="tab" id='div0symp' value="symptomatic" onclick="show1();" /> Patient is symptomatic
  <input type="radio" name="tab" id='div0asymp' value="asymptomatic" onclick="show2();" /> Patient is asymptomatic
</div>

<div id="div1" class="hide">
  <hr>
  <p>Test the patient<br> Test Result is:</p>
  <input type="radio" id='div1pos' name="tab2" value="positive" onclick="show3()"> Positive &nbsp;
  <input type="radio" id='div1neg' name="tab2" value="negative" onclick="show4()"> Negative
</div>

<div id="div2" class="hide">
  <hr>
  <p>Perform an X-Ray </p>
  <input type="radio" id='div2norm' name="tab3" value="normal" onclick="show5()"> Normal &nbsp;
  <input type="radio" id='div2abn' name="tab3" value="abnormal" onclick="show6()"> Abnormal
</div>

<div id="div9" class="hide">
  <hr>
  <p>No further evaluation unless<br>
    <strong>contact</strong> or <strong>immunosupressed/HIV</strong></p>
  <input type="submit" name="tab7" value="nextstep" onclick="show10()"> &nbsp;
</div>

Upvotes: 0

Views: 70

Answers (2)

caramba
caramba

Reputation: 22480

See the main important difference will be found in the if() statement.

Note:

  1. I've disabled some input fields as they are not really relevant to the question as you need to click on the not disabled ones to see whats going on.
  2. See the function name changes from show1() to showX() it's bad naming. But if a function does the same thing as another one there is no reason to do a show2() doing the same as show1()..

function showX(){
	 document.getElementById('div1').style.display ='block';
	}
function showY(){
	  document.getElementById('div2').style.display ='block';
	}
function show5(){
    if(
        document.getElementById('div0symp').checked
        && document.getElementById('div1neg').checked
        && document.getElementById('div2norm').checked
    ) {
        document.getElementById('div9').style.display = 'block';
    }
}
.hide {
    display: none;
}
<div id="div0" class="show">
  <input type="radio" name="tab" id='div0symp' value="symptomatic" onclick="showX();" /> Patient is symptomatic
  <input disabled type="radio" name="tab" id='div0asymp' value="asymptomatic" onclick="showX();" /> Patient is asymptomatic
</div>

<div id="div1" class="hide">
  <hr>
  <p>Test the patient<br> Test Result is:</p>
  <input disabled type="radio" id='div1pos' name="tab2" value="positive" onclick="showY()"> Positive &nbsp;
  <input type="radio" id='div1neg' name="tab2" value="negative" onclick="showY()"> Negative
</div>

<div id="div2" class="hide">
  <hr>
  <p>Perform an X-Ray </p>
  <input type="radio" id='div2norm' name="tab3" value="normal" onclick="show5()"> Normal &nbsp;
  <input disabled type="radio" id='div2abn' name="tab3" value="abnormal" onclick="show6()"> Abnormal
</div>

<div id="div9" class="hide">
  <hr>
  <p>No further evaluation unless<br>
    <strong>contact</strong> or <strong>immunosupressed/HIV</strong></p>
  <input type="submit" name="tab7" value="nextstep" onclick="show10()"> &nbsp;
</div>

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25341

It seems you're using jQuery, so you can fix show5() like this:

function show1() {
  document.getElementById('div1').style.display = 'block';
}

function show2() {
  document.getElementById('div1').style.display = 'block';
}

function show3() {
  document.getElementById('div2').style.display = 'block';
}

function show4() {
  document.getElementById('div2').style.display = 'block';
}

function show5() {
  if ($('input[id=div0symp]:checked, input[id=div1neg]:checked, input[id=div2norm]:checked').length == 3)
    document.getElementById('div9').style.display = 'block';
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div0" class="show">
  <input type="radio" name="tab" id='div0symp' value="symptomatic" onclick="show1();" /> Patient is symptomatic
  <input type="radio" name="tab" id='div0asymp' value="asymptomatic" onclick="show2();" /> Patient is asymptomatic
</div>

<div id="div1" class="hide">
  <hr>
  <p>Test the patient<br> Test Result is:</p>
  <input type="radio" id='div1pos' name="tab2" value="positive" onclick="show3()"> Positive &nbsp;
  <input type="radio" id='div1neg' name="tab2" value="negative" onclick="show4()"> Negative
</div>

<div id="div2" class="hide">
  <hr>
  <p>Perform an X-Ray </p>
  <input type="radio" id='div2norm' name="tab3" value="normal" onclick="show5()"> Normal &nbsp;
  <input type="radio" id='div2abn' name="tab3" value="abnormal" onclick="show6()"> Abnormal
</div>

<div id="div9" class="hide">
  <hr>
  <p>No further evaluation unless<br>
    <strong>contact</strong> or <strong>immunosupressed/HIV</strong></p>
  <input type="submit" name="tab7" value="nextstep" onclick="show10()"> &nbsp;
</div>

However, it is better not to use attribute selectors, just go straight like this:

function show1() {
  document.getElementById('div1').style.display = 'block';
}

function show2() {
  document.getElementById('div1').style.display = 'block';
}

function show3() {
  document.getElementById('div2').style.display = 'block';
}

function show4() {
  document.getElementById('div2').style.display = 'block';
}

function show5() {
  if ($('#div0symp:checked, #div1neg:checked, #div2norm:checked').length == 3)
    document.getElementById('div9').style.display = 'block';
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div0" class="show">
  <input type="radio" name="tab" id='div0symp' value="symptomatic" onclick="show1();" /> Patient is symptomatic
  <input type="radio" name="tab" id='div0asymp' value="asymptomatic" onclick="show2();" /> Patient is asymptomatic
</div>

<div id="div1" class="hide">
  <hr>
  <p>Test the patient<br> Test Result is:</p>
  <input type="radio" id='div1pos' name="tab2" value="positive" onclick="show3()"> Positive &nbsp;
  <input type="radio" id='div1neg' name="tab2" value="negative" onclick="show4()"> Negative
</div>

<div id="div2" class="hide">
  <hr>
  <p>Perform an X-Ray </p>
  <input type="radio" id='div2norm' name="tab3" value="normal" onclick="show5()"> Normal &nbsp;
  <input type="radio" id='div2abn' name="tab3" value="abnormal" onclick="show6()"> Abnormal
</div>

<div id="div9" class="hide">
  <hr>
  <p>No further evaluation unless<br>
    <strong>contact</strong> or <strong>immunosupressed/HIV</strong></p>
  <input type="submit" name="tab7" value="nextstep" onclick="show10()"> &nbsp;
</div>

And in that case, you don't need jQuery, you can use simple JavaScript:

function show1() {
  document.getElementById('div1').style.display = 'block';
}

function show2() {
  document.getElementById('div1').style.display = 'block';
}

function show3() {
  document.getElementById('div2').style.display = 'block';
}

function show4() {
  document.getElementById('div2').style.display = 'block';
}

function show5() {
  if (document.getElementById('div0symp').checked
   && document.getElementById('div1neg').checked
   && document.getElementById('div2norm').checked)
      document.getElementById('div9').style.display = 'block';
}
.hide {
  display: none;
}
<div id="div0" class="show">
  <input type="radio" name="tab" id='div0symp' value="symptomatic" onclick="show1();" /> Patient is symptomatic
  <input type="radio" name="tab" id='div0asymp' value="asymptomatic" onclick="show2();" /> Patient is asymptomatic
</div>

<div id="div1" class="hide">
  <hr>
  <p>Test the patient<br> Test Result is:</p>
  <input type="radio" id='div1pos' name="tab2" value="positive" onclick="show3()"> Positive &nbsp;
  <input type="radio" id='div1neg' name="tab2" value="negative" onclick="show4()"> Negative
</div>

<div id="div2" class="hide">
  <hr>
  <p>Perform an X-Ray </p>
  <input type="radio" id='div2norm' name="tab3" value="normal" onclick="show5()"> Normal &nbsp;
  <input type="radio" id='div2abn' name="tab3" value="abnormal" onclick="show6()"> Abnormal
</div>

<div id="div9" class="hide">
  <hr>
  <p>No further evaluation unless<br>
    <strong>contact</strong> or <strong>immunosupressed/HIV</strong></p>
  <input type="submit" name="tab7" value="nextstep" onclick="show10()"> &nbsp;
</div>

Upvotes: 0

Related Questions