title: Radio input section toggle with jQuery
body: <p>Here is my HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td class="survey-label"&gt;LIFT&lt;/td&gt;
          &lt;td data-label="RECOMMEND" class="choice recommended"&gt;
              &lt;input name="input_1" type="radio" value="yes" id="c_1_1" data-default="yes"&gt;
          &lt;/td&gt;
          &lt;td data-label="NOT RECOMMEND" class="choice not-recommended"&gt;
              &lt;input name="input_2" type="radio" value="no" id="c_1_2" data-default="no"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="survey-label"&gt;WALK&lt;/td&gt;
          &lt;td data-label="RECOMMEND" class="choice recommended"&gt;
              &lt;input name="input_1" type="radio" value="yes" id="c_2_1" data-default="yes"&gt;
          &lt;/td&gt;
          &lt;td data-label="NOT RECOMMEND" class="choice not-recommended"&gt;
              &lt;input name="input_2" type="radio" value="no" id="c_2_2" data-default="no"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Can I select/deselect the input radios individually by clicking the parent 2nd time?</p>
  
  <p>Here I have done so far:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      jQuery(document).ready(function($) {
          var click = $('.choice');
          var input = click.find('input:radio');
          var inputVal = input.val();
          input.attr('data-default', inputVal);
          input.attr('data-alt');
  
          click.on("click", function() {
          var input = $(this).find('input:radio');    
          var def = input.attr('data-default');
          var alt = input.attr('data-alt');
          (input.val() == def) ? input.val(alt) : input.val(def);
          $(this).toggleClass('none-slected');
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I can select/deselect  individual radio, but stuck on choosing a different radio on a table row.</p>