Изменение цвета границы в таблице при нажатии кнопки-переключателя

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