單擊單選按鈕時更改表格中的邊框顏色

Question

單擊單選按鈕時，我正在嘗試更改表格中的邊框顏色。

我試過使用 jQuery 但結果不是我所期望的。

這是我的代碼： https://codepen.io/ervannnn/pen/gOObrdP

javascript：

$('input[type=radio]').change(function() {    
    $('.box-tr-1').removeClass().addClass('box-tr-1-se');
    $(this).parent().addClass('box-tr-1');
});

css：

table {
    border-collapse: collapse;
}
.table-item {
    width: 90%;
}
.box-tr-1 {
    border-left: 4px solid #ddd;
    border-right: 4px solid #ddd;
    border-top: 4px solid #ddd;
}
.box-tr-2 {
    border-left: 4px solid #ddd;
    border-right: 4px solid #ddd;
}

.box-tr-3 {
    border-top: 4px solid #ddd;
}

.box-tr-1-se {
    border-left: 4px solid red;
    border-right: 4px solid red;
    border-top: 4px solid red;
}
.box-tr-2-se {
    border-left: 4px solid red;
    border-right: 4px solid red;
}

.box-tr-3-se {
    border-top: 4px solid red;
}

代碼筆： https://codepen.io/ervannnn/pen/gOObrdP

請幫助我，任何幫助將不勝感激，非常感謝！

Answer 1

你的代碼有點亂，但它應該適合你的目的：

$('input[type=radio]').change(function() {   
  $('tr').each(function(){
    $(this).removeClass('box-tr-1-se');
    $(this).removeClass('box-tr-2-se');
  })
  if($(this).is(':checked')){
    $(this).parent().parent().addClass('box-tr-1-se');
    $(this).parent().parent().next().addClass('box-tr-2-se')          
  }
});

.box-tr-2-se {
  border-left: 4px solid red;
  border-right: 4px solid red;
  border-bottom: 4px solid red;
 }

編輯：添加/刪除 trxt 顏色：

$('.table-item input[type=radio]').change(function() {
  $('.table-item tr').each(function(){
    //Previous methods...
    $(this).find('.red').removeClass('red')
  })
  if($(this).is(':checked')){
    //Previous methods...
    $(this).parent().next().children().eq(1).addClass('red');
  }
});