title: Show/Hide form fields based on value of other fields
body: <p>I am dynamically generating a form with different fields ( textbox, textarea, select, radio / checkbox ).</p>
  
  <p>I want to show / hide some fields, depending on what was selected in some other fields.</p>
  
  <p>A simple case can be:</p>
  
  <p><b><a href="http://jsfiddle.net/z6Lm1m5x/" rel="nofollow">Fiddle Demo</a></b></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('select').change(function () {
      if($(this).val() === '1') {
          $('p').show();
      }
      else {
          $('p').hide();
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select&gt;
      &lt;option value="0"&gt;Bike&lt;/option&gt;
      &lt;option value="1"&gt;Car&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;p&gt;Left / right hand drive ?
      Left: &lt;input type="radio" value="left" name="dir" /&gt;
      Right: &lt;input type="radio" value="right" name="dir" /&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am generating the fields dynamically and there are multiple situations, where I need to show / hide different fields, based on value of some other fields. So, I do not want to write the same code again &amp; again. To adhere with the DRY principle, I want to create some sort of generalized function ( a plugin may be ), to handle all these scenarios.</p>
  
  <p>My basic (working) idea is:</p>
  
  <p><b><a href="http://jsfiddle.net/nscmwokf/1/" rel="nofollow">Fiddle Demo</a></b></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('[data-dependent]').each(function () {
      var $ele = $(this);
      var dependsOn = $ele.data('dependent');
      $.each(dependsOn, function (target, value) {
          $(target).on('change', function () {
              if ($(this).val() === value) {
                  $ele.show();
              } else {
                  $ele.hide();
              }
          });
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>[data-dependent] {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="vehicle"&gt;
    &lt;option value="0"&gt;Bike&lt;/option&gt;
    &lt;option value="1"&gt;Car&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;p data-dependent='{"#vehicle": "1" }'&gt;Left / right hand drive ? Left:
    &lt;input type="radio" value="left" name="dir" /&gt;Right:
    &lt;input type="radio" value="right" name="dir" /&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code works, but it attaches a lot of event handlers. Also, it does not handle the situation where a field can be shown / hidden, based on values of more than 1 field. I couldn't figure out a nice way to handle this.</p>
  
  <p>I am looking for a clean &amp; flexible solution. If there's already a plugin for this, that will work too.</p>