jQuery多种显示隐藏形式

Question

我的表格上有很多问题，有些是/否。 如果选择是，它将显示一个文本框，询问更多信息。 我已经完成了显示/隐藏部分的工作，但是一旦我单击页面其他位置的按钮，它就会隐藏文本区域，并且我丢失了信息。

目前，我正在使用：JQuery

$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
    $(".text").show();
});
$("#r2").click(function () {
    $(".text").hide();
});
});

HTML

<input type="radio" name="radio1" id="r1" value="Yes">
<input type="radio" name="radio1" id="r2" value="No">
<div class="text">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>

Answer 1

您需要相对于选中的复选框定位文本区域。

• 我监听的是change事件，而不是click （除了click ，还有其他更改单选按钮的方法）
• 我已经使用.nextAll()和.nextAll() .first()来获取相关的文本区域
• 我还使用过带有this.value == 'Yes' toggle() ，它将被表示为true或false值，因此分别显示或隐藏该元素。

$('.text').hide();
$('input[type=radio]').on('change', function(){
    $(this).nextAll('.text').first().toggle( this.value == 'Yes' );
});

的jsfiddle

Answer 2

OP，如果有人正在使用按钮寻找答案，那么我通过Norlihazmey Ghazali的建议解决了该问题，后者提到了针对特定ID的问题。 例如：

            <div class="btn-group btn-toggle"> 
                <input type="button" class="btn btn-default" id="taxliabl1" value="Yes"></input>
                <input type="button" class="btn btn-default" id="taxliabl2" value="No"></input>
                <br>
                <div class="taxliabltext">
                <br>
                <textarea class="form-control" rows="3" id="comment"></textarea>
                <br>

jQuery的：

$(document).ready(function () {
   $(".taxliabltext").hide();
   $("#taxliabl1").click(function () {
   $(".taxliabltext").show();
   });
   $("#taxliabl2").click(function () {
   $(".taxliabltext").hide();
   });
});