Jquery使用单选按钮隐藏和显示

Question

我有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属性＆＃34; Checked＆＃34;），之后，无论我检查哪一个，它都赢了＆＃39;隐藏或显示，为什么？

Answer 1

除了在页面加载时检查单选按钮之外，还必须使用单选按钮附加.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();
   }
});

Answer 2

查看演示jsFiddle

jquery的

$(document).ready(function(){
    $("#bookingForm").hide();
    $('input[type="radio"]').click(function(){
        if($(this).attr("id")=="isNotBooking"){
            $("#bookingForm").hide();
        }
        if($(this).attr("id")=="isBooking"){
            $("#bookingForm").show();
        }
    });
});

HTML

<input type="radio" name="isBooking" value="false" id="isNotBooking" checked/>
<input type="radio" name="isBooking" value="true" id="isBooking" />

<input type="text" id="bookingForm" />