javascript 监听两个单选按钮响应并显示隐藏的文本框

Question

在我的 html 表单中，我有两组单选按钮，根据其响应，我显示一个隐藏的 div

我的 HTML 代码:

<div class="input-quest">Question 1</div>
<div class="input-resp">
<input onClick="question_1_response_yes();" type="radio" name="button1" value="Yes" checked /><label>Yes</label>    
<input onClick="question_1_response_no();" type="radio" name="button1" value="No" /><label>No</label>
</div>  

<div class="input-quest">Question 2</div>
<div class="input-resp">
<input onClick="question_2_response_yes();"  type="radio" name="button2" value="Yes" checked /><label>Yes</label>   
<input onClick="question_2_response_no();"  type="radio" name="button2" value="No" /><label>No</label>
</div>  

<div id="response-q1-yes-q2-yes" style="display:none;">
    <div class="block">
        <div class="input-quest">Question 3</div>
        <div class="input-resp"><span><input  class="textbox" id="q3" name="q3" type="text" value=" " /></span></div>
    </div>
</div>


<div id="response-q1-yes-q2-no" style="display:none;">
    <div class="block">
        <div class="input-quest">Question 4</div>
        <div class="input-resp"><span><input  class="textbox" id="q4" name="q4" type="text" value=" " /></span></div>
    </div>
</div>


<div id="response-q1-no-q2-yes" style="display:none;">
    <div class="block">
        <div class="input-quest">Question 5</div>
        <div class="input-resp"><span><input  class="textbox" id="q5" name="q5" type="text" value=" " /></span></div>
    </div>
</div>

<div id="response-q1-no-q2-no" style="display:none;">
    <div class="block">
        <div class="input-quest">Question 6</div>
        <div class="input-resp"><span><input  class="textbox" id="q6" name="q6" type="text" value=" " /></span></div>
    </div>
</div>

我能够显示隐藏的 div 取决于使用 onclick 函数的单个单选按钮

function question_1_response_yes()  {
$('#response-q1-yes-q2-yes').slideDown("fast");
$('#response-q1-yes-q2-no').slideUp("fast");
$('#response-q2-no-q2-yes').slideUp("fast");
$('#response-q1-no-q2-no').slideUp("fast");
}

但我需要显示隐藏的文本框取决于两组单选按钮选择，例如

1. 问题 1 是，问题 2 是 ---> 显示 div response-q1-yes-q2-yes
2. 问题 1 是，问题 2 否 ---> 显示 div response-q1-yes-q2-no
3. 问题 1 否和问题 2 是 ---> 显示 div response-q1-no-q2-yes
4. 问题 1 否和问题 2 否 ---> 显示 div response-q1-no-q2-no

我必须仅在选择两个单选按钮之后显示隐藏的 div。怎么才能做到这一点

FIDDLE

Answer 1

尝试一下这段代码肯定有效。HTML:

<div class="input-quest">Question 1</div>
    <div class="input-resp">
    <input type="radio" name="button1" value="Yes" id="1yes" checked /><label>Yes</label>    
    <input type="radio" name="button1" value="No" id="1no" /><label>No</label>
    </div>  

    <div class="input-quest">Question 2</div>
    <div class="input-resp">
    <input onClick="response();"  type="radio" name="button2" value="Yes" checked id="2yes" /><label>Yes</label>   
    <input onClick="response();"  type="radio" name="button2" value="No" id="2no" /><label>No</label>
    </div>  

    <div id="response-q1-yes-q2-yes" style="display:none;">
        <div class="block">
            <div class="input-quest">Question 3</div>
            <div class="input-resp"><span><input  class="textbox" id="q3" name="q3" type="text" value=" " /></span></div>
        </div>
    </div>


    <div id="response-q1-yes-q2-no" style="display:none;">
        <div class="block">
            <div class="input-quest">Question 4</div>
            <div class="input-resp"><span><input  class="textbox" id="q4" name="q4" type="text" value=" " /></span></div>
        </div>
    </div>


    <div id="response-q1-no-q2-yes" style="display:none;">
        <div class="block">
            <div class="input-quest">Question 5</div>
            <div class="input-resp"><span><input  class="textbox" id="q5" name="q5" type="text" value=" " /></span></div>
        </div>
    </div>

    <div id="response-q1-no-q2-no" style="display:none;">
        <div class="block">
            <div class="input-quest">Question 6</div>
            <div class="input-resp"><span><input  class="textbox" id="q6" name="q6" type="text" value=" " /></span></div>
        </div>
    </div>

Javascript:

function response(){
  if(document.getElementById("1yes").checked && document.getElementById("2yes").checked){
      document.getElementById("response-q1-yes-q2-yes").style.display="inherit";
  }else if(document.getElementById("1yes").checked && document.getElementById("2no").checked){
     document.getElementById("response-q1-yes-q2-no").style.display="inherit";
  }else if(document.getElementById("1no").checked && document.getElementById("2yes").checked){
     document.getElementById("response-q1-no-q2-yes").style.display="inherit";
  }else if(document.getElementById("1no").checked && document.getElementById("2no").checked){
     document.getElementById("response-q1-no-q2-no").style.display="inherit";
  }
}

您也可以将上述代码中的 .style.display 更改为 .slideUp 或 .slideDown。这取决于您的选择，如果它解决了您的问题，请将其设为最佳答案。它肯定有效...