title: Using backbone.js, detect radio button event and show or hide divs
body: <p>I'm using a backbone view to capture when a user chooses between two radio buttons. </p>
  
  <p>Here is what the radio buttons look like:</p>
  
  <pre><code>Do you have a spouse?
  [ ] Yes
  [ ] No   
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;span&gt;Do you have a spouse?&lt;/span&gt;
  &lt;input type="radio" name="hasSpouse" value="yes"&gt;Yes
  &lt;br/&gt;
  &lt;input type="radio" name="hasSpouse" value="no"&gt;No
  
  &lt;div class="hasSpouseYes" style="display:none;"&gt;Awesome!&lt;/div&gt;
  &lt;div class="hasSpouseNo"  style="display:none;"&gt;That's too bad&lt;/div&gt;
  </code></pre>
  
  <p>Two divs are either shown or hidden depending on whether the user clicks the 'yes' or the 'no' radio button.</p>
  
  <p>So I put this is the event section of the view:</p>
  
  <pre><code>'click input[name=hasSpouse]:checked': 'hasSpouseEvent',
  </code></pre>
  
  <p>And here is the function that is supposed to take care of hiding and show the various div sections.</p>
  
  <pre><code> hasSpouseEvent: function () {
          var val = $('input[name=hasSpouse]:checked').val();
          if (val === 'yes') {
              this.$('.hasSpouseYes').show();
              this.$('.hasSpouseNo').hide();
          } else {
              this.$('.hasSpouseYes').hide();
              this.$('.hasSpouseNo').show();
          }
   }
  </code></pre>
  
  <p>The first time, it works fine.  But after testing it out and clicking the 'yes' and 'no' radio buttons, it starts seemingly randomly showing and hiding either div.</p>