jQuery/JavaScript - Hide / Show Drop down box pending on Radio Button

Question

Hi everyone, I want to make it so that the drop-down is only displayed when the radio button (option 3) is clicked and have it hidden if either 1 or 2 is selected. What would be the best way to complete this? I have a little bit of experience with JavaScript and slim to none with jQuery but it seemed like it might be the way to go.

Thanks for any help, Dan

Here is the HTML code I have as of now:

<p class="help">Selection:</p>

<div id='buttons'>
  <label><input type="radio" name="select" /> Option 1 </label>
  <label><input type="radio" name="select" /> Option 2</label>
  <label><input type="radio" name="select" /> Option 3</label>
</div>
<div id="list" style="display: none;">
  <label>Please Select From the List: 
    <select>
      <option>True</option>
      <option>False</option>
    </select>
  </label>
</div>

Answer 1

Assuming you are using jquery, as it sounds like it from your question, you could modify your HTML like so:

<p class="help">Selection:</p>
    <div id='buttons'>
        <label><input type="radio" name="select" id="option1" /> Option 1 </label>
        <label><input type="radio" name="select" id="option2" /> Option 2</label>
        <label><input type="radio" name="select" id="option3" /> Option 3</label>
    </div>
    <div id="list">
        <label>Please Select From the List: 
            <select id="mySelect">
                <option>True</option>
                <option>False</option>
            </select>
        </label>
    </div>​
</p>

Then you could write some jquery like so:

$(document).ready(
    function()
    {
        $("#option1, #option2, #option3").click(
            function()
            {
                if (this.id == "option3")
                    $("#mySelect").hide();
                else
                    $("#mySelect").show();
            });
    });​

You can see it working here: http://jsfiddle.net/AVFuY/3/

EDIT: I removed the unneeded class and just used the id's so as to not confuse and add unnecessary code.

Answer 2

<label><input type="radio" name="select" onclick="document.getElementById('list').style.display=this.checked?'':'none'" /> Option 3</label>

Answer 3

$(document).ready(function(){
  $("[name=select]").change(function(){  // Whenever the radio buttons change
    $("#list").toggle($("[name=select]").index(this)===2);  // Only keep the list open when it's the last option (First option = 0, Third option = 2)
  });
});

This code in action.

Answer 4

Since this is a fairly basic question, I think it'll be instructional to walk you through the jQuery documentation while I answer your question. If you know truly nothing about jQuery, I recommend following this short tutorial first -- it will make things much, much easier for you in the future: jQuery Documentation - Getting Started With jQuery

Your requirement is that something happens (in this case, another element is hidden/shown) when we click the radio buttons. There's two parts to this problem: first, we need to find the radio buttons, then we need to make something happen when we click it.

1. Finding the radio buttons

Take a look at the jQuery Selector documentation here: http://api.jquery.com/category/selectors/

As you can see, there's a specific pseudo-selector for radio buttons, ":radio". We want to select everything inside of the element with ID "buttons", so this is how the selector will look in total:

$("#buttons input:radio");

By the way, it's called a "pseudo-selector" because it filters items we've already selected (in this case, input tags inside of a div with id "button"). Pseudo-selectors always start with a ":".

2. Making something happen when we click them

Consult the jQuery Events reference here: http://api.jquery.com/category/events/

We want the ".click()" event here, clearly. Once we've selected our elements, we can apply a click handler to them like this:

$("#buttons input:radio").click(function() {
    // make something happen here
    alert("input button clicked: " + $(this).index());
});

Note that this will apply the same click handler to all three of the input buttons, but you can access the specific element that was clicked via the "this" keyword. Wrapping $() around it makes it into a jQuery selection rather than just a Javascript object and allows us to call jQuery functions on it.

3. Hiding and showing the list element conditionally

Let's extend the code above to actually hide and show that other div, depending on which item was clicked. We're going to refer to the jQuery Effects documentation so that we can make hiding and showing it exciting: http://api.jquery.com/category/effects/

The functions we'll be using are ".slideUp()", which hides an element, and ".slideDown()", which shows it. We'll also be using the ".index()" function I used in the previous example to figure out which button was clicked, although I recommend giving the button a unique ID in the future so that your code isn't dependent on the order of the buttons. Here's the final code:

$("#buttons input:radio").click(function() {
    // if it was the third button (0-indexed, so the 3rd one is index 2)...
    if ($(this).index() == 2) {
        // display the element with ID "list"
        $("#list").slideDown();
    }
    else {
        // hide the element with ID "list"
        $("#list").slideUp();
    }
});

Sorry for the length of this answer, but hopefully it was more conducive to your understanding of jQuery than "copy and paste this 3-line super-compact solution".

Answer 5

Without changing your markup:

$(function()
{
    $("#list").hide();
    $("#buttons input:radio[name=select]").click(function()
    {
      var myindex = $("#buttons input:radio[name=select]").index(this);
      if (myindex == 2)
      {
         $("#list").show();
      }
      else
      {
        $("#list").hide();
      };
    });
});

EDIT: Another option: just show it on the last button in the list.

$(function()
{
    $("#list").hide();
    $("#buttons input:radio[name=select]").click(function()
    {
      var myindex = $("#buttons input:radio[name=select]").index(this);
      var lastone = $("#buttons input:radio[name=select]:last").index("#buttons input:radio[name=select]");
      if (myindex == lastone)
      {
         $("#list").show();
      }
      else
      {
        $("#list").hide();
      };
    });
});