• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

query show based on radio button

See my code attached.

I am trying to use jquery to show or hide the current_printer label and text area based on the own_printer radio checkbox having option 1 checked.

What am I doing wrong?
Do you own a large format printer?<br />
<label><input name="own_printer" type="radio" id="own_printer_0" value="Yes" />Yes</label>
<label><input type="radio" name="own_printer" value="No" id="own_printer_1" />No</label>

<label for="current_printer">What printers do you own?</label>
<textarea name="current_printer" id="current_printer" cols="45" rows="5"></textarea>

<script type="text/javascript">

 function hide_current_printer()
  {
    if ($("own_printer_0").checked() != "checked") 
    {
      $("#current_printer").hide();
      $("label[for=current_printer]").hide();
    }
    else
    {
      $("#current_printer").show();
      $("label[for=current_printer]").show();
    }
  }

</script>

Open in new window

0
petewinter
Asked:
petewinter
  • 4
  • 3
1 Solution
 
sonawanekiranCommented:
Your function should be like this


function hide_current_printer()
  {
    
    if ($("#own_printer_0").is(':checked')) 
    {
      $("#current_printer").hide();
      $("label[for=current_printer]").hide();
    }
    else
    {
      $("#current_printer").show();
      $("label[for=current_printer]").show();
    }
  }

Open in new window

0
 
Gurvinder Pal SinghCommented:
make it

if('#own_printer_0').is(':checked'))
{
   $("#current_printer").hide();
   $("label[for=current_printer]").hide();
}
else
{
   $("#current_printer").show();
   $("label[for=current_printer]").show();
}
0
 
sonawanekiranCommented:
Here is complete code

Demo : http://jsfiddle.net/hue7W/


<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Kiran Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
  $("input:radio[name=own_printer]").click(function(){
    hide_current_printer();
  });
       
  });
  
  function hide_current_printer()
  {
    
    if ($("#own_printer_0").is(':checked')) 
    {
      $("#current_printer").hide();
      $("label[for=current_printer]").hide();
    }
    else
    {
      $("#current_printer").show();
      $("label[for=current_printer]").show();
    }
  }



  
</script>
</head>

<body>
Do you own a large format printer?<br />
<label><input name="own_printer" type="radio" id="own_printer_0" value="Yes" />Yes</label>
<label><input type="radio" name="own_printer" value="No" id="own_printer_1" />No</label>

<label for="current_printer">What printers do you own?</label>
<textarea name="current_printer" id="current_printer" cols="45" rows="5"></textarea>
</body>

</html>

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
petewinterAuthor Commented:
Thanks, but it's not working. Can you please double check?
0
 
sonawanekiranCommented:
Have you looked at demo http://jsfiddle.net/hue7W/
0
 
petewinterAuthor Commented:
sonawanekiran - Thanks nearly there. One last requested.

If Yes or No is not selected I would like the current printer fields hidden
0
 
sonawanekiranCommented:
Update your script like below code

Demo : http://jsfiddle.net/hue7W/2/



$(document).ready(function(){
  hide_current_printer();
  $("input:radio[name=own_printer]").click(function(){
    hide_current_printer();
  });
       
  });
  
  function hide_current_printer()
  {
    
    if ($("#own_printer_1").is(':checked')) 
    {
      $("#current_printer").show();
      $("label[for=current_printer]").show();
    }
    else
    {
      $("#current_printer").hide();
      $("label[for=current_printer]").hide();
    }
  }

Open in new window

0
 
petewinterAuthor Commented:
Many thanks again
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now