选中并更改一个组名称中的单选按钮

Question

我有一个表格，其中的单选按钮具有与每行中的行选择器相同的“name”属性 有简单的JQuery代码选择已检查的单选按钮并找到<tr>标签，然后通过css突出显示它，问题是：当我从另一个表行更改单选按钮时，新行获取样式但前一行仍然突出显示！这是我的HTML：

$('.my-table input').click(function() {
    var checked = $(this).attr('checked', true);
    if (checked) {
        $(this).closest('tr').addClass("highlighted");
    } else {
        $(this).closest('tr').removeClass("highlighted");
    }
});

.highlighted {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="my-table">
  <thead class="my-table-head">
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn2">
          <label for="rbtn2"></label>
        </p>
      </td>
      <td>title</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn3">
          <label for="rbtn3"></label>
        </p>
      </td>
      <td>titke2</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn4">
          <label for="rbtn4"></label>
        </p>
      </td>
      <td>title3</td>

    </tr>
  </tbody>
</table>

Answer 1

最好使用更改事件而不是单击事件。在第一个更改事件中删除所有highlighted中的课程tr，例如follownig。

$('.my-table input').change(function() {
    $('.my-table tr').removeClass("highlighted");      
    if (this.checked) {
        $(this).closest('tr').addClass("highlighted");
    }
});

.highlighted {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="my-table">
  <thead class="my-table-head">
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn2">
          <label for="rbtn2"></label>
        </p>
      </td>
      <td>title</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn3">
          <label for="rbtn3"></label>
        </p>
      </td>
      <td>titke2</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn4">
          <label for="rbtn4"></label>
        </p>
      </td>
      <td>title3</td>

    </tr>
  </tbody>
</table>

Answer 2

删除文档中所有tr标记的“突出显示”类是一种快速的方法。

    $('.my-table input').click(function() {
      $('tr').removeClass("highlighted")
      var checked = $(this).attr('checked', true);
      if (checked) {
        $(this).closest('tr').addClass("highlighted");
      }
    });

.highlighted {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="my-table">
  <thead class="my-table-head">
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn2">
          <label for="rbtn2"></label>
        </p>
      </td>
      <td>title</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn3">
          <label for="rbtn3"></label>
        </p>
      </td>
      <td>titke2</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn4">
          <label for="rbtn4"></label>
        </p>
      </td>
      <td>title3</td>

    </tr>
  </tbody>
</table>

Answer 3

$('.my-table input').click(function() {
        $(this).closest('tbody').find('tr').removeClass("highlighted");
        $(this).closest('tr').addClass("highlighted");
});

.highlighted {
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="my-table">
  <thead class="my-table-head">
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn2">
          <label for="rbtn2"></label>
        </p>
      </td>
      <td>title</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn3">
          <label for="rbtn3"></label>
        </p>
      </td>
      <td>titke2</td>

    </tr>
    <tr>
      <td>
        <p>
          <input class="with-gap" name="group1" type="radio" id="rbtn4">
          <label for="rbtn4"></label>
        </p>
      </td>
      <td>title3</td>

    </tr>
  </tbody>
</table>