根据多个选中的单选按钮显示特定div

Question

我试图根据一些单选按钮选择显示某个div。所以，我希望它显示div9，如果div0 =症状，div1 =负，＆amp; div2 =正常，但我没有得到那个结果。谢谢！

＆＃13;

＆＃13;

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';
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请参阅if()声明中的主要重要区别。

注意：

1. 我已禁用某些输入字段，因为它们与问题无关，因为您需要点击未停用的字段才能查看最新情况。
2. 查看功能名称从show1()更改为showX()错误的命名。但是，如果某个函数与另一个函数的作用相同，则没有理由show2()执行与show1()相同的操作。
＆＃13;
＆＃13;
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';
    }
}
＆＃13;
.hide {
    display: none;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您似乎正在使用jQuery，因此您可以像这样修复show5()：

＆＃13;

＆＃13;

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';
}

＆＃13;

.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但是，最好不要使用属性选择器，只需这样直接：

＆＃13;

＆＃13;

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';
}

＆＃13;

.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，你不需要jQuery，你可以使用简单的JavaScript：

＆＃13;

＆＃13;

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';
}

＆＃13;

.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;