title: Checked and change radio button in one group name
body: <p>I have a table that has a radio button with the same "name" attribute as a row selector in each row.<br>
  There is simple JQuery code that selects the checked radio button and finds the <code>&lt;tr&gt;</code> tag and then highlights it by css, the problem is: when I change the radio button from another table row's, new rows gets the style but previous row are still highlighted! here is my HTML:</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>$('.my-table input').click(function() {
      var checked = $(this).attr('checked', true);
      if (checked) {
          $(this).closest('tr').addClass("highlighted");
      } else {
          $(this).closest('tr').removeClass("highlighted");
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.highlighted {
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="my-table"&gt;
    &lt;thead class="my-table-head"&gt;
      &lt;tr&gt;
        &lt;th&gt;1&lt;/th&gt;
        &lt;th&gt;2&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;p&gt;
            &lt;input class="with-gap" name="group1" type="radio" id="rbtn2"&gt;
            &lt;label for="rbtn2"&gt;&lt;/label&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td&gt;title&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;p&gt;
            &lt;input class="with-gap" name="group1" type="radio" id="rbtn3"&gt;
            &lt;label for="rbtn3"&gt;&lt;/label&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td&gt;titke2&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;p&gt;
            &lt;input class="with-gap" name="group1" type="radio" id="rbtn4"&gt;
            &lt;label for="rbtn4"&gt;&lt;/label&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td&gt;title3&lt;/td&gt;
  
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>