单击单选按钮时更改表格中的边框颜色

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;
}

codepen：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;
 }

编辑：添加/删除文本颜色：

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