gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 20:16:54 27 4
gpt4 key购买 nike

在我的 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

最佳答案

一些 jQuery 延迟的乐趣(参见 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");
});
});

好吧,实际上你可以使用普通函数而不是通知/进度:)

关于javascript - 根据两个单选按钮显示隐藏的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19080203/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com