CODEWITHSUNDEEP
jqueryradio-button
MahiloDai
MahiloDai

Reputation: 63

How to show or hide div or form element with jquery?

I am trying to show or hide fieldset based on the answer selected on YES/NO radio button. I have multiple form elements that has to be shown or hidden based on their corresponding YES/NO radio button. But the code below is not working for me. Could someone help me to correct this problem?

<!-- My Form Element  -->

<form>
<fieldset id="question">
  <legend>This is my question</legend>
  <label for="answerYes">Yes</label>
  <input name="answer" class="myradio" type="radio" value="1" />
  <label for="answerNo">No</label>
  <input name="answer" class="myradio" type="radio" value="0" />
</fieldset>

<fieldset class="subQuestion">
  <legend>This is my question</legend>
  <label for="answerYes">Yes</label>
  <input name="answer" class="subradio" type="radio" value="1" />
  <label for="answerNo">No</label>
  <input name="answer" class="subradio" type="radio" value="0" />
</fieldset>

</form>


// Jquery to show or hide subQuestion

$(document).ready(function(){
  // do your checks of the radio buttons here and show/hide what you want to
  $(".subQuestion").hide();

  $(document).on('click', '.myradio' , function() {
         if ($(this.value).length > 0){ 
            $(".subQuestion").show();           
         }
         else {
            $(".subQuestion").hide();           
         }       
    })

});

Upvotes: 1

Views: 25142

Answers (5)

S. S. Rawat
S. S. Rawat

Reputation: 6111

Try this, this is helpful for you. In your code problem in $(this.value).length > 0) this line, this is syntax error, difficult to match the value of radio button which is clicked.

$(".subQuestion").hide();
  $('input[type=radio]').change(function() {
         if ($(this).val()== 0){ 
            $(".subQuestion").show();           
         }
         else {
            $(".subQuestion").hide();           
         }       
  });

Upvotes: 0

Vuthy Sok
Vuthy Sok

Reputation: 720

Try this

$(document).ready(function(){

    $(".subQuestion").hide();

     $('#question input[type="radio"]').click(function(){
        if (this.value == 1){ 
            $(".subQuestion").show();           
        } else {
            $(".subQuestion").hide();           
        }       
    })

});

Upvotes: 1

Dinesh
Dinesh

Reputation: 54

Try this

$(document).ready(function(){

  $(".subQuestion").hide();

  $(document).on('click', '.myradio' , function() {
         if (this.value == 0){ 
            $(".subQuestion").hide();          
         }
         else {
            $(".subQuestion").show();           
         }       
    })

});

Upvotes: 0

bipen
bipen

Reputation: 36531

you don't need $ in front, to use this.value ... and check for value itself and not its length...

this

if ($(this.value).length > 0){

 should be

if (this.value > 0){ //using DOM check if value is greter than 0

or

if ($(this).val()> 0){  //using jquery

so your final code should be

$(document).ready(function(){
// do your checks of the radio buttons here and show/hide what you want to
$(".subQuestion").hide();

 $(document).on('click', '.myradio' , function() {
     if (this.value > 0){ 
        $(".subQuestion").show();           
     }
     else {
        $(".subQuestion").hide();           
     }       
  })

});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You are checking the length of the value property, which is 1(because they have valeus 00 and 1) in both the cases, you need to check the value is greater than 0

$(document).ready(function(){
  // do your checks of the radio buttons here and show/hide what you want to
  $(".subQuestion").hide();

  $(document).on('click', '.myradio' , function() {
         if (this.value > 0){ 
            $(".subQuestion").show();           
         }
         else {
            $(".subQuestion").hide();           
         }       
    })

});

Demo: Fiddle

Upvotes: 4

Related Questions