CODEWITHSUNDEEP
jquery
Marcel Angir
Marcel Angir

Reputation: 59

Jquery Hide and show with Radio button

I have 2 radio button inputs

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

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

What i want is when the radio button with ID = isNotBooking is checked, the bookingForm will be hidden, if radio button with ID = isBooking is checked, the bookingForm will be shown.

I try this code : 

$(document).ready(function() {
  if ($("#isNotBooking").is(':checked')) {
    $("#bookingForm").hide();
  } 

  if ($("#isBooking").is(':checked')) {
    $("#bookingForm").show();
  }
});

This code only works for one time after the page finish loading (its hidden since i set the ID isNotBooking attribute "Checked"), after that, no matter which one i check, it won't hide or show, why ?

Upvotes: 0

Views: 58

Answers (2)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

View Demo 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" />

Upvotes: 1

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Besides checking RadioButtons on page load, you have to attach .change() event also with RadioButtons as shown :-

$('input:radio[name=isBooking]').on('change',function(){
   if(this.checked && this.id == "isNotBooking"){
       $("#bookingForm").hide();
   }
   else if(this.checked && this.id == "isBooking"){
       $("#bookingForm").show();
   }
});

Upvotes: 2

Related Questions