CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
user2400026
user2400026

Reputation:

How can I show a div with jquery mobile when a radio button is selected?

Here is the JSFiddle relating to my question. http://jsfiddle.net/kane/MFJUv/

I've tried several things to show/hide the dropdown (div id: machinedropdown).

On load I want the machine dropdown to be hidden but when a user selects the "Machine" radio button it needs to show. Can anyone suggest a solution for me? 

<div data-role="content" id="radio"
    <form>
      <fieldset data-role="controlgroup" data-type="horizontal" class="center-controlgroup">
            <input name="radio-choice-h-6" id="radio-choice-h-6a" type="radio" checked="checked" value="on">
            <label for="radio-choice-h-6a">Run</label>
            <input name="radio-choice-h-6" id="radio-choice-h-6b" type="radio" value="off">
            <label for="radio-choice-h-6b">Swim</label>

            <!-- ON SELECT I NEED TO HIDE THE "div id = "machinedropdown" -->
            <input name="radio-choice-h-6" id="radio-choice-h-6c" type="radio" value="off">
            <label for="radio-choice-h-6c">Machine</label>
         </fieldset>
</form>
</div>

<div data-role="content" id="machinedropdown"
  <label class="select" for="select-choice-1">Select, native menu</label>
        <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Machine 1</option>
        <option value="rush">Machine 2</option>
        <option value="express">Machine 3</option>
        <option value="overnight">Machine 4</option>
  </select>
</div>

Upvotes: 1

Views: 714

Answers (1)

dsgriffin
dsgriffin

Reputation: 68616

One way to do it, is to check whether the radio is both checked and that it is the element that contains the ID specific to machine.

Firstly, you set the initial state of the drop down to hidden:

$('#machinedropdown').hide();

Next, you listen for the change event on the radio inputs - if the input is both checked and has the ID specific to the machine input (radio-choice-h-6c) you set the drop-down to display - otherwise, set it back to hidden (so that when you change the selected radio button from machine to another option, the drop-down isn't still showing):

$('input').change(function(){ // On change of radio buttons
    if ($(this).is(':checked') && $(this).attr('id') == 'radio-choice-h-6c') {
      $('#machinedropdown').show();
      // If the radio button is checked and has the machine id, show the drop down.
    }
    else {
      $('#machinedropdown').hide();
      // Else, re-hide it.
    }
});

jsFiddle here.

Upvotes: 3

Related Questions