Help with javascript to hide radio buttons

Question

Hi guys,

I got this code on here recently

<script type='text/javascript'>
 $('#discountselection').hide();

    $('#No').click(function(){
        $('#discountselection').hide();
    });

    $('#Yes').click(function(){
        $('#discountselection').show();
    });
</script>

The aim being to hide a drop down box depending on whether the radio buttons yes and no were selected. Here is my code:

<td width="338">Would You like to avail of our multiyear discounts?*
  <br />See <a href="Pricing">Pricing</a> for more details
</td>
<td colspan="4">
  <input name="discount" type="radio" id="Yes" value="Yes" />Yes
  <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  
     <select class="purple" name="discountselection" id="discountselection">
         <option value="1" selected="selected">1 Year</option>
         <option value="2">2 Years</option>
         <option value="3">3 Years</option> 
      </select>                  
</td>

I have the javascript placed in between the head tags, but for some reason this just isn't working for me. I'm not familiar with javascript at all. If any one could see where I am going wrong this would be a big help. Thanks.

Answer 1

The code works just fine for me.

If it doesn't work for you, try a couple of things:

• make sure that jQuery is included properly and is working
• put your event handling code anywhere after the markup with those elements

Answer 2

your code is fine, you just need to wrapped it with the ready handler.

like this,

$(function() {
    $('#discountselection').hide();

    $('#No').click(function() {
        $('#discountselection').hide();
    });

    $('#Yes').click(function() {
        $('#discountselection').show();
    });
});​

you could also shorten your codes like this,

$(function() {
    $('#discountselection').hide();
    $('#Yes, #No').click(function() {
        $('#discountselection').toggle(this.value==='Yes');
    });
});​

Answer 3

If you do not need jQuery, here is one way of doing it

<script type="text/javascript">
function showDiscount(show) {
  document.getElementById('discountselection').style.display=(show)?'block':'none';
}
window.onload=function() {
  showDiscount(document.getElementById('discountYes').checked);
}
</script>
<table>
<tr>
<td width="338">Would You like to avail of our multiyear discounts?*
  <br />See <a href="Pricing">Pricing</a> for more details
</td>
<td colspan="4">
  <input name="discount" type="radio" id="discountYes" value="Yes" onclick="showDiscount(this.checked)"/>Yes
  <input name="discount" type="radio" id="discountNo" value="No" checked="checked" onclick="showDiscount(!this.checked)"/>No<br />  
     <select class="purple" name="discountselection" id="discountselection" style="display:none">
         <option value="1" selected="selected">1 Year</option>
         <option value="2">2 Years</option>
         <option value="3">3 Years</option> 
      </select>                  
</td>
</tr>
</table>

Answer 4

The $() syntax that you're using is jQuery syntax, not plain Javascript. JQuery is a Javascript library which adds addtional functionality over normal JS. If you're using this syntax, you'll need to include the JQuery library.

What you're trying to achieve is relatively simple, even without JQuery, but the code will look completely different if you don't plan to use JQuery.

If you are planning to use JQuery, your code needs to be wrapped in a docuemnt ready block, so that it gets initialised correctly.