[英]jQuery multiple show hides in one form
I have a form with a number of questions on it, some are a yes/no. 我的表格上有很多问题,有些是/否。 If yes is selected, it will display a text box asking for more info.
如果选择是,它将显示一个文本框,询问更多信息。 I've got the show/hide part to work but once I click a button elsewhere on the page it then hides the textarea and i lose the info.
我已经完成了显示/隐藏部分的工作,但是一旦我单击页面其他位置的按钮,它就会隐藏文本区域,并且我丢失了信息。
Currently I'm using this: JQuery 目前,我正在使用:JQuery
$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
$(".text").show();
});
$("#r2").click(function () {
$(".text").hide();
});
});
HTML 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>
You need to target the textarea relative to the checkboxes being checked. 您需要相对于选中的复选框定位文本区域。
change
event, rather than click
(there are other ways of changing a radio button other than clicking it) change
事件,而不是click
(除了click
,还有其他更改单选按钮的方法) .nextAll()
and .first()
to get the relevant textarea .nextAll()
和.nextAll()
.first()
来获取相关的文本区域 toggle()
with this.value == 'Yes'
which will be expressed as a true or false value and therefore show or hide the element respectively. this.value == 'Yes'
toggle()
,它将被表示为true或false值,因此分别显示或隐藏该元素。 $('.text').hide();
$('input[type=radio]').on('change', function(){
$(this).nextAll('.text').first().toggle( this.value == 'Yes' );
});
OP here, if anyone is looking for the answer using buttons instead I resolved the issue with advice from Norlihazmey Ghazali who mentioned to target the specific id. OP,如果有人正在使用按钮寻找答案,那么我通过Norlihazmey Ghazali的建议解决了该问题,后者提到了针对特定ID的问题。 For example:
例如:
<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: jQuery的:
$(document).ready(function () {
$(".taxliabltext").hide();
$("#taxliabl1").click(function () {
$(".taxliabltext").show();
});
$("#taxliabl2").click(function () {
$(".taxliabltext").hide();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.