Looking to update the border color of a table when a radio button is clicked.
Attempted to use jQuery, but not seeing the desired result.
Here is the code snippet: 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 link: https://codepen.io/ervannnn/pen/gOObrdP
Any assistance would be greatly appreciated. Thank you!