檢查並更改單選按鈕組中的單選按鈕

Question

我有一個單選按鈕與每行中的行選擇器具有相同「名稱」屬性的單選按鈕。
有一個簡單的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

$('.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>

Answer 2

它更好地使用改變事件，而不是Click事件。在像follownig這樣的第一次變化事件中從所有tr中刪除類highlighted。

$('.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 3

去除類「突出了」文檔中的所有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 4

刪除類highlighted。

不喜歡下面：

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

DEMO：jsFiddle