1つのグループ名でラジオボタンをチェックして変更します

Question

各行の行セレクタと同じ「名前」属性を持つラジオボタンを持つテーブルがあります。
チェックされたラジオボタンを選択して<tr>タグを見つけて、それをcssで強調表示する単純なJQueryコードがあります。問題は次のとおりです。ラジオボタンを別のテーブル行から変更すると、新しい行はスタイルを取得しますが、強調表示されています！ここに私の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

それは代わりに、クリックイベントの変更イベントを使用することをお勧め。 follownigのような最初の変更イベントでは、highlightedをすべてtrから削除してください。

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