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

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; }编辑：添加/删除文本颜色：$('.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');  }});