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

您需要相对于要检查的复选框定位textarea。

我听过change事件，而不是click（还有其他方法可以更改单击按钮以外的单选按钮）
我使用.nextAll()和.first()来获取相关的textarea
我还将toggle()与this.value == 'Yes'一起使用，它将表示为true或false值，因此分别显示或隐藏该元素。

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

JSFiddle

Answer 2

OP在这里，如果有人正在寻找使用按钮的答案，我解决了Norlihazmey Ghazali的建议解决了这个问题，他提到了针对具体身份的目标。例如：

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

jQuery多个show隐藏在一个表单中

2 个答案: