title: Jquery show div based on another div's visibility and checked value
body: <p>I need to show/hide a div based on another div's input. Normally this is easy but this one is a headache. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main-question"&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="form-radios"&gt;
        &lt;div class="radio"&gt;
          &lt;label class="control-label"&gt;&lt;input type="radio" name="ad" value="option1" class="form-radio" /&gt;option 1&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="radio"&gt; 
          &lt;label class="control-label"&gt;&lt;input type="radio" name="ad" value="option2" class="form-radio" /&gt;option 2&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="radio"&gt; 
          &lt;label class="control-label"&gt;&lt;input type="radio" name="ad" value="option3" checked="checked" class="form-radio" /&gt;option 3&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="form-radios"&gt;
        &lt;div class="radio"&gt;
          &lt;label class="control-label"&gt;&lt;input type="radio" name="ad" value="optiona" class="form-radio" /&gt;option a&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="radio"&gt; 
          &lt;label class="control-label"&gt;&lt;input type="radio" name="ad" value="optionb" class="form-radio" /&gt;option b&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="radio"&gt; 
          &lt;label class="control-label"&gt;&lt;input type="radio" name="ad" value="optionc" checked="checked" class="form-radio" /&gt;option c&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="next-form"&gt;
    &lt;!-- code --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is a module that shows the group based on a drop-down select. This module creates a <code>display:none;</code> on all groups that aren't currently shown and a <code>display:block;</code> for the one that is visible. I have tried the following (and many iterations) with no luck:</p>
  
  <pre><code>    &lt;script&gt;
      (function ($) {
        $('#main-question .form-group').each(function() {
          if ( ($(this).css('display') === 'block') &amp;&amp; ($(this).find('[type=radio]').val() !== '') ) {
            $('div#next-form').show(400);
          }
        });
      })(jQuery);
      &lt;/script&gt;
  </code></pre>
  
  <p>And I'm not sure how to fire this when the select box changes as well since it </p>