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

Question

我试图在单击单选按钮时更改表格中的边框颜色。我试过使用 jQuery，但结果不是我所期望的。这是我的代码：https : //codepen.io/ervannnn/pen/gOObrdPjavascript:$('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;

 }

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

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

  }

});