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");
}

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

question-1 yes and question-2 yes ---> display div `response-q1-yes-q2-yes`
question-1 yes and question-2 no ---> display div `response-q1-yes-q2-no`
question-1 no and question-2 yes ---> display div `response-q1-no-q2-yes`
question-1 no and question-2 no ---> display div `response-q1-no-q2-no`

我必须在两个单选按钮选择后才显示隐藏的div。怎么做呢

FIDDLE SETUP

Answer 1

一些jQuery Deferred fun（见http://api.jquery.com/category/deferred-object/）：

http://jsfiddle.net/a2fbp/4/

var dfd = $.Deferred();
var radios = {};

// use the change event too, think about keyboard users
$('input[type="radio"]').on('click change',function(){ var $t=$(this);
    dfd.notify(
        $t.attr('name'),
        $t.attr('value').toLowerCase()
    );
});

dfd.progress(function( name, value ){
    radios[ name ] = value;
    //console.log( name, value );
    var id = 'response-q1-'+(radios.button1||'')
                    +'-q2-'+(radios.button2||'');
    //console.log( id );

    // you should use some nicer selector here, like a common class
    $('[id^="response-q1-"]').each(function(){ var $t=$(this);
        $t[ $t.attr('id') === id ? 'slideDown' : 'slideUp']("fast");
    });
});

好的，实际上你可以使用普通函数而不是notify / progress：）

Answer 2

您可以使用全局范围的变量来存储每个问题的响应。选择单选按钮时设置这些值，然后调用一个函数来评估（检查）响应变量的值并相应地设置div的可见性。

我更新了你的JSFiddle以证明这一点： http://jsfiddle.net/a2fbp/10/



var q1Response = '';
var q2Response = '';

function question_1_response_yes()  {
    q1Response = 'y';
    CheckResponses();
}

function question_1_response_no()   {
    q1Response = 'n';
    CheckResponses();
}


function question_2_response_yes()  {
    q2Response = 'y';
    CheckResponses();
}


function question_2_response_no()   {
    q2Response = 'n';
    CheckResponses();
}

function CheckResponses()
{
    // 1) First, hide all questions, taking us to our default state
    $('#response-q1-yes-q2-yes').hide();

    // 2) Check responses - Show the appropriate text box
    if (q1Response == 'y' && q2Response == 'y')
    {
        $('#response-q1-yes-q2-yes').slideDown("fast");
    }

    /* Add if statements here similar to 2) above for other scenarios */
}

Answer 3

我会以完全不同的方式做到这一点，首先只需要一个处理所有单选按钮的javascript函数。

$("input[type=radio]").on("click",questionResponse);

然后，计算逻辑来评估一个函数的所有按钮：

// untested psuedo code to get you thinking...
function questionResponse(e){
    var _name = e.target.name;
    var _val = e.target.value;
    var isQuestionOne = (_name.indexOf("1") != -1):true?false;
      var isTrue = (_val == "Yes");
    if(isQuestionOne){
        if(isTrue){
            // question one and "Yes"
            $('#response-q1-yes-q2-yes').slideDown("fast");
            $('#response-q1-yes-q2-no, #response-q2-no-q2-yes, #response-q1-no-q2-no').slideUp("fast");
            // here, add in whatever else you want to show or hide
            // if (question 2 is yes...), etc...
        } else {
             // question one, and "No"
        }
    } else {
         // question 2
        ...do this for the remaining combinations...
    }
 }

根据两个单选按钮显示隐藏的div

3 个答案: