title: Coffeescript changes class for all radio forms instead of for just the one that was changed
body: <p>I have a series of radio buttons in groups of three (for each step of a quiz).  If the radio button chosen is "video", I would like to show the "videoCreator" div.  If it is "excel", the "excelCreator" div, etc.  These divs are just additional form items below the radio buttons to allow the user to enter more information.  </p>
  
  <p>My problem is that the coffeescript below works, except that it changes all of the radio forms.  For example lets say step 1 is video, and the video div shows.  If I change step 2 to the excel radio button, the excel div shows for all steps (radio forms) including the first, which was supposed to stay video.  I think I need to create a variaable, but I am not sure. Any help would be appreciated.</p>
  
  <p>Coffeescript </p>
  
  <pre><code>$(".excelCreator").hide()
  $(".videoCreator").hide()
  $(".mcCreator").hide()
  $(".stepRadio").change -&gt;
    if @value is "video" and @checked
      $(".videoCreator").show()
    else if @value is "excel" and @checked
      $(".excelCreator").show()
    else if @value is "multiple_choice" and @checked
      $(".mcCreator").show()
    else
      $(".excelCreator").hide()
      $(".videoCreator").hide()
      $(".mcCreator").hide()
  </code></pre>
  
  <p>Here is the show template with the radio buttons</p>
  
  <pre><code> &lt;div&gt;
      &lt;div&gt;
        &lt;%= f.label :media_type, "Excel" %&gt;
        &lt;%= f.radio_button :media_type, 'excel', :checked =&gt; true, class: 'icheck stepRadio' %&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;%= f.label :media_type, "Video" %&gt;
        &lt;%= f.radio_button :media_type, 'video', class: 'icheck stepRadio' %&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;%= f.label :media_type, "Multiple Choice" %&gt;
        &lt;%= f.radio_button :media_type, 'multiple_choice', class: 'icheck stepRadio' %&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the options I would like shown based upon the radio buttons above in the same view</p>
  
  <pre><code>&lt;div class="excelCreator"&gt;
      &lt;%= f.label :link, "Excel Link" %&gt;
      &lt;%= f.text_field :link, :style =&gt; "width: 98%;" %&gt;
      &lt;%= f.label :answer, "Excel Answer (#)" %&gt;
      &lt;%= f.text_field :answer, :style =&gt; "width: 98%;" %&gt;
  &lt;/div&gt;
  
  &lt;div class="videoCreator"&gt;
      &lt;%= f.label :link, "Video Link" %&gt;
      &lt;%= f.text_field :link, :style =&gt; "width: 98%;" %&gt;
  &lt;/div&gt;
  
  &lt;div class="mcCreator"&gt;
      &lt;%= f.label :choice_one, "Choice One" %&gt;
      &lt;%= f.text_field :choice_one, :style =&gt; "width: 98%;" %&gt;
      &lt;%= f.label :choice_two, "Choice Two" %&gt;
      &lt;%= f.text_field :choice_two, :style =&gt; "width: 98%;" %&gt;
      &lt;%= f.label :choice_three, "Choice Three" %&gt;
      &lt;%= f.text_field :choice_three, :style =&gt; "width: 98%;" %&gt;
      &lt;%= f.label :choice_four, "Choice Four" %&gt;
      &lt;%= f.text_field :choice_four, :style =&gt; "width: 98%;" %&gt;
      &lt;%= f.label :answer, "MC Answer (#)" %&gt;
      &lt;%= f.text_field :answer, :style =&gt; "width: 98%;" %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is an example of the html that is output for one of the form fields</p>
  
  <pre><code> &lt;div&gt;
        &lt;label for="course_levels_attributes_0_steps_attributes_0_media_type"&gt;Excel&lt;/label&gt;
        &lt;input checked="checked" class="icheck stepRadio" id="course_levels_attributes_0_steps_attributes_0_media_type_excel" name="course[levels_attributes][0][steps_attributes][0][media_type]" type="radio" value="excel" /&gt;
      &lt;/div&gt;
  </code></pre>