[英]Jquery Hide and show with Radio button
我有2个单选按钮输入
<input type="radio" name="isBooking" value="false" id="isNotBooking" checked/>
<input type="radio" name="isBooking" value="true" id="isBooking" />
<input type="text" id="bookingForm" />
我想要的是当ID = isNotBooking单选按钮被选中时,bookingForm将被隐藏,如果ID = isBooking单选按钮被选中,则将会显示bookingForm。
我尝试以下代码:
$(document).ready(function() {
if ($("#isNotBooking").is(':checked')) {
$("#bookingForm").hide();
}
if ($("#isBooking").is(':checked')) {
$("#bookingForm").show();
}
});
此代码仅在页面完成加载后有效一次(由于我将ID设置为isNotBooking属性“ Checked”,因此该代码处于隐藏状态),此后,无论我检查哪一个,它都不会隐藏或显示,为什么?
除了在页面加载时检查RadioButtons之外,还必须将.change()
附加.change()
事件,如下所示:-
$('input:radio[name=isBooking]').on('change',function(){
if(this.checked && this.id == "isNotBooking"){
$("#bookingForm").hide();
}
else if(this.checked && this.id == "isBooking"){
$("#bookingForm").show();
}
});
$(document).ready(function(){
$("#bookingForm").hide();
$('input[type="radio"]').click(function(){
if($(this).attr("id")=="isNotBooking"){
$("#bookingForm").hide();
}
if($(this).attr("id")=="isBooking"){
$("#bookingForm").show();
}
});
});
<input type="radio" name="isBooking" value="false" id="isNotBooking" checked/>
<input type="radio" name="isBooking" value="true" id="isBooking" />
<input type="text" id="bookingForm" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.